CODEWITHSUNDEEP
csscss-transitionspseudo-element
matt
matt

Reputation: 44393

CSS3 transitions on pseudo-elements (:after, :before) not working?

I'm showing the title attribute of a link on :hover. The title attribute is appended to the link via :after… 

Now I'm wondering how I can animate the opacity of the :after pseudo-element when hovering-in and hovering-out.

html

<a class="link" href="#" title="something"></a>​

css

.link {
    display:block;
    width:50px;
    height:50px;
    background:red;
}

.link:after {
    position:relative; 
    content: attr(title); 
    top:55px; 
    color:$blue; 
    zoom: 1; 
    filter: alpha(opacity=00); 
    opacity: 0;
    -webkit-transition: opacity .15s ease-in-out;
    -moz-transition: opacity .15s ease-in-out;
    -ms-transition: opacity .15s ease-in-out;
    -o-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out;
}

.link:hover:after { 
    zoom: 1; 
    filter: alpha(opacity=100); 
    opacity: 1;
}

Check out the demo: http://jsfiddle.net/d2KrC/

Any ideas why this is not working? ​

Upvotes: 16

Views: 30874

Answers (2)

DMTintner
DMTintner

Reputation: 14739

Theres a fairly easy workaround to this webkit bug to make transitions work on pseudo classes. Here's a great blog post about it: http://xiel.de/webkit-fix-css-transitions-on-pseudo-elements/

Basically webkit doesnt support the transitions directly but you can apply the transition and style you want to change to its parent element. Then in the pseudo class you put the same style properties that you want to affect, but give them the value: inherit. That will cause them to inherit all of the parent elements values including the transition.

Here's a sample I did to animate the :after element, up and down

a { 
    position: static; /* explicitly defined so not to forget that it can't be relative or :after transition hack will not work */
    top: 1px; /*doesnt move it because it is position static */
    -webkit-transition: top 200ms ease 0;
}
a:after {
    content: '';
    position: absolute;
    top: inherit;
}
a:hover {
    top: 3px;
}

*Update The bug has been fixed in Chrome Canary (as of February), but still appears to be broken in Safari. Can check the status and stay updated on it here: https://code.google.com/p/chromium/issues/detail?id=54699

Upvotes: 5

Jona
Jona

Reputation: 2147

WebKit (Chrome, Safari) does not support transitions on pseudo elements.

It should work in Firefox.

Edit: The issue in WebKit is now resolved. The patch allready landed in Chrome Carnery, so it will be supportet from version 26 on. I don't know about Safari.

Upvotes: 10

Related Questions