I'm stuck with CSS pseudo-elements :before and :after when I was trying to stylize button's background. The problem is this: when I'm using only positive z-indices to place span itself and its pseudo-elements in right order, :before and :after are always overlapping the element. When I'm using negative z-indices, it's all right, but I don't want to change other underlying elements' z-indices just to make the button working.
So that's the problem and that's the goal to be achieved except the negative z-indices.
Problem code:
.button {
display: inline-block;
z-index:3;
position: relative;
left: 25px;
top: 25px;
height: 60px;
padding-left: 20px;
padding-right: 20px;
background: rgb(96,96,100);
border: 1px solid #202020;
color: #dddddd;
}
.button:before {
content: "";
width: 100%;
height: 100%;
z-index: 2;
position: absolute;
background: rgba(85,85,90, .7);
padding: 10px;
left: -10px;
top: -10px;
}
.button:after {
content: "";
width: 100%;
height: 100%;
z-index: 1;
position: absolute;
background: rgba(85,85,90, .4);
padding: 20px;
left: -20px;
top: -20px;
}
go for borders ! :)
http://jsfiddle.net/RwGV9/1/
basically
border:solid 10px rgba(85,85,90, .7);
left: -10px;
top: -10px;
and same thing for the other one with the right left, top and padding !
if you don't mind putting attributes in your html, you could do like that :
http://jsfiddle.net/RwGV9/
in the HTML :
<span data-text='button !' class="button">button</span>
and in the CSS :
.button:before {
content: attr(data-text);
Basically put the text in the highest layer using button using content: attr(); and make you text disappear in the deepest one (bg color = type color is not very elegant but it keeps the text of the button selectable for the user !)
http://jsfiddle.net/D8gDK/
.button {
display: inline-block;
position: relative;
left: 25px;
top: 25px;
width: 100px;
height: 60px;
padding-left: 20px;
padding-right: 20px;
background: rgb(96,96,100);
border: 1px solid #202020;
color: #dddddd;
}
.button:before {
content: "";
display: block;
width: 140px;
height: 60px;
position: relative;
background: rgba(85,85,90, .7);
border: 10px solid rgba(85,85,90, .4);
padding: 10px;
left: -40px;
top: -20px;
}
I got rid of the second pseudo element and put the before behind the button.
Might need some work with the colors...
Works only if you know the width of the button, though
Related
I have a little mark at the bottom right of my own code snippet page, which should also contain my website's favicon. I want to use ::before for this but I have no clue how to resize the image to stay inside the 1em by 1em pseudo-element.
div#snippet {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(200,200,200,0.3);
}
a#l2020-link {
color: blue;
background-color: lightgrey;
position: absolute;
bottom: 10px;
right: 10px;
border: 0px solid grey;
border-radius: 3px;
padding: 3px;
display: flex;
flex-direcion: row;
}
a#l2020-link::before {
content: url(https://www.lampe2020.de/favicon.ico);
width: 1em;
height: 1em;
display: inline-block;
}
<div id="snippet">
<!-- Imagine the code inputs and the iFrame to show the result here -->
Lampe2020.de
</div>
I want the favicon to be fully visible but shrunk down to 1em by 1em.
I've tried CSS object-fit but it had absolutely null effect on the image no matter what I set it to. overflow: hidden or overflow: clip kinda work but they obviously just cut off what's too much of the image and don't resize the image to fit.
You can set the content to "" and use background-image instead, and set the background-size to 1em.
div#snippet {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(200,200,200,0.3);
}
a#l2020-link {
color: blue;
background-color: lightgrey;
position: absolute;
bottom: 10px;
right: 10px;
border: 0px solid grey;
border-radius: 3px;
padding: 3px;
display: flex;
flex-direcion: row;
}
a#l2020-link::before {
content:"";
background-image: url(https://www.lampe2020.de/favicon.ico);
width: 1em;
height: 1em;
background-size:1em;
display: inline-block;
}
<div id="snippet">
<!-- Imagine the code inputs and the iFrame to show the result here -->
Lampe2020.de
</div>
I have before like below and I want rotate just background not label.
How I can do it ?
div {
width: 50px;
height: 5px;
position: relative;
background: #ff756b;
margin-top: 55px;
}
div::before {
content: 'lable';
position: absolute;
left: -5px;
top: -33px;
background: red;
color: white;
border-radius: 20px 20px 3px 20px;
transform: rotate(45deg);
width: 22px;
height: 22px;
}
<div></div>
You can add :after with div and add content
div {
width: 50px;
height: 5px;
position: relative;
background: #ff756b;
margin-top: 55px;
}
div:after {
content: 'Lable';
font-size: 11px;
position: absolute;
left: -5px;
top: -29px;
color: #fff;
}
div::before {
content: '';
position: absolute;
left: -5px;
top: -33px;
background: red;
color: white;
border-radius: 20px 20px 3px 20px;
transform: rotate(45deg);
width: 22px;
height: 22px;
}
<div></div>
transform: rotate (45deg);
Will rotate the complete element, including content and background.
If you want to rotate only the background then you need to keep the background separate or you can add your label in actual element instead of pseudo-element.
You can put the text into an after pseudo element which is not rotated.
div {
width: 50px;
height: 5px;
position: relative;
background: #ff756b;
margin-top: 55px;
}
div::before,
div::after {
position: absolute;
left: -5px;
top: -33px;
width: 22px;
height: 22px;
}
div::before {
content: '';
background: red;
border-radius: 20px 20px 3px 20px;
transform: rotate(45deg);
}
div::after {
content: 'lable';
color: white;
}
<div></div>
However, be aware of accessibility issues. That text may not get read out by a screen reader and if it is important for the user to know it is there is may be better to put the text in a label element actually within the HTML. You can still style it the same way so it is within the red 'bubble'.
I am trying to style button like this:
Now I first though I could just style it with an ::after element attached to the button.
Currently I have this (using sass syntax):
button {
min-width: 230px;
border: 1px solid green;
background-color: white;
padding: 25px;
display: block;
position: relative;
z-index: 10;
&::after {
content: '';
display: block;
position: absolute;
top: 10px;
left: 10px;
width: 100%;
height: 100%;
border: 1px solid green;
background-color: white;
z-index: -2;
}
}
But this renders something which looks a little different:
The rectangle more to the right is my :afterelement.
It is indeed behind the text «Button» (without the z-Index it would just be in front), but it does not go behind the other rectangle.
How could I style this correctly?
Thanks for the help
Cheers
Remove the z-index: 10 from the button. When the parent element (button in this case) have a z-index value it becomes the root element of the stacking context, and you can't move the child under it.
You can read more about stacking context and stacking order in the great article What No One Told You About Z-Index.
button {
min-width: 230px;
border: 1px solid green;
background-color: white;
padding: 25px;
display: block;
position: relative;
}
button::after {
content: '';
display: block;
position: absolute;
top: -10px;
left: 10px;
width: 100%;
height: 100%;
border: 1px solid green;
background-color: white;
z-index: -1;
}
body {
padding: 20px;
}
<button>Button</button>
I have added a few little things to the code. but this seems to work for me. There might be a simpler way, but the flip, flip works. :)
button {
min-width: 230px;
border: 1px solid green;
background-color: white;
padding: 25px;
display: block;
position: relative;
left: 20px;
z-index: 10;
transform: rotateY(180deg);
}
button::after {
content: '';
display: block;
position: absolute;
top: 10px;
left: 10px;
width: 100%;
height: 100%;
border: 1px solid green;
background-color: white;
z-index: -1;
}
.buttonz{
transform: rotateY(180deg);
}
<button>
<div class="buttonz">
Button
</div>
</button>
I have a CSS tooltip set-up to appear to the right of a link when hovered over, and it is working correctly when the link all appears on one line.
However, if the linked text runs too long and goes onto the next line, the tooltip won't appear to the right of the last word any longer.
This content section of this post is an example of what I'm talking about: http://blog.betbright.com/top-stories/premier-league-tactical-analysis-and-betting-tips-four-things-we-learnt-25th-august/
Some of the links are one on line (working correctly) some are on two lines (not working).
Here is my code for this tooltip:
a.CTA {
position: relative;
display: inline;
}
a.CTA span {
position: absolute;
width:110px;
color: #FFFFFF;
background: #00A1E0;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.CTA span:after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
width: 0; height: 0;
border-right: 8px solid #00A1E0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
a:hover.CTA span {
visibility: visible;
opacity: 1;
left: 100%;
top: 50%;
margin-top: -15px;
margin-left: 15px;
z-index: 999;
}
Any help with this would be appreciated.
Thanks,
Paul
Here is how i would do it,
a.CTA {
position: relative;
display: inline;
}
a.CTA span {
position: absolute;
width:110px;
color: #FFFFFF;
background: #00A1E0;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.CTA span:after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
width: 0; height: 0;
border-right: 8px solid #00A1E0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
a:hover.CTA span {
visibility: visible;
opacity: 1;
/* left: 100%; */
/* top: 50%; */
margin-top: -4px;
margin-left: 15px;
z-index: 999;
}
I wouldn't use top and left property, they position elements absolutely.
In the case where you have two lines top:50% positions the tooltip between the two lines.
I commented out top/left and adjusted the margin-top.
http://www.w3schools.com/cssref/pr_pos_top.asp
Best
y_s_f
You need to remove height.
a.CTA span{
position: absolute;
width: 110px; /*then make adjustment here */
color: #FFFFFF;
background: #00A1E0;
display: block;
/* height: 30px; */
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
Then the long text will be fit inside the tooltip.
I think you can use float: right; for your tooltip, then display: inline-block;
I have the following icon , which is used mainly on most of my asp.net mvc web pages:-
<i class=" icon icon-blue icon-star-on "></i>
The related CSS classes for this icon is :-
.active .icon32.icon-star-on,.icon32.icon-star-on,.icon32.icon-star-on:hover {background-position : -448px -96px ;}
.icon.icon-blue,.icons-blue .icon {background-image : url('../img/opa-icons-blue16.png') ;}
But I need to add a tootip for the icon, so that when a use move the mouse over the icon to show a tooltip. So is there a way to define the tooltip inside my CSS , so that I do not have to add the tooltip manually on each screen?
Thanks
Yes, by using :after:
.icon:hover:after {
content: "Your tooltip";
display: block;
position: relative;
top: -16px;
right: -16px;
width: 100px;
background: lightblue;
}
Also check the demo.
Please note that all .icon classes get the same tooltip. This is pure CSS solution. If you want them to be different for each icon, you could use different classes, or use jQuery.
Add an attribute with the text for the element and use it for hovering.
I have showed using an anchor tag.
html
Hover here
css
.tooltip{
display:inline;
position:relative;
}
.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
'http://jsfiddle.net/Kxnqx/'
Add this code to your css:
.tooltip {
display: inline;
position: relative;
}
.tooltip:hover {
text-decoration: none;
}
.tooltip:hover:after{
background: #111;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 18px;
color: #fff;
content: attr(title);
display: block;
left: 50%;
padding: 5px 15px;
position: absolute;
white-space: nowrap;
z-index: 98;
}
.tooltip:hover:before{
border: solid;
border-color: #111 transparent;
border-width: 6px 6px 0 6px;
bottom: 12px;
content: "";
display: block;
left: 75%;
position: absolute;
z-index: 99;
}
Add a a title to your icon title="Tooltip text" and add the class of tooltip to the icon.
Source: http://forrst.com/posts/Simple_pure_CSS_tooltip_with_arrow-BkY