Put animation on pseudo-elements with content - html

Question

I have some minor problems with some CSS pseudo-elements.
I am trying to make my custom tooltip, fade in and out, when hovering, but it doesn't seems to work.
The pseudo-element, are getting the content from an data-title HTML5 tag.
I have tried this, without any luck:
span:before, span:after {
opacity: 0;
-webkit-transition: all .2s;
-moz-transition: all .2s;
-o-transition: all .2s;
-ms-transition: all .2s;
transition: all .2s;
}
span:hover:after {
content: attr(data-title);
display: block;
opacity: 1;
position: absolute;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
color: #FFF;
background: rgba(0,0,0,0.75);
border-radius: 3px;
left: -20px;
top: 46px;
}
The tooltip shows properly, but without the transition. I have also tried to add a content: "" in the span:before, span:after section, without any luck either.
Here's the fiddle: http://jsfiddle.net/nDq9f/3/
Anyone who can help me please?

Answer 1

I got i fixed!
I but all the styling (display, width, height etc...) in the span:before, span:after part, instead of in the :hover part. Then it all worked perfect!
You can see the fiddle in the bottom of this post.
span:before, span:after {
content: attr(data-title);
display: block;
position: absolute;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
color: #FFF;
background: rgba(0,0,0,0.75);
border-radius: 3px;
left: -20px;
top: 46px;
opacity: 0;
-webkit-transition: all .2s;
-moz-transition: all .2s;
-o-transition: all .2s;
-ms-transition: all .2s;
transition: all .2s;
}
span:hover:after {
opacity: 1;
}
I also added a pointer-events: none; so you can't make the tooltip appear when hovering it, when it has opacity: 0;
Here's the js Fiddle

Answer 2

Try to change this in your span:before, span:after:
span:before, span:after {
content: attr(title);
filter: alpha(opacity=00);
opacity: 0;
-webkit-transition: opacity .6s ease-in-out;
-moz-transition: opacity .6s ease-in-out;
-ms-transition: opacity .6s ease-in-out;
-o-transition: opacity .6s ease-in-out;
transition: opacity .6s ease-in-out;
}
NOTE: the content: attr(title); property makes all sense