Animated pseudo elements in WebKit

by Schepp

HTML

<p>hover me!</p>

CSS

/* 
Apply the transition you want on pseudos to their parent.
In addition you leave out one important piece, here: position:absolute; 
*/
p {
    -webkit-transition-property: top;
    -webkit-transition-duration: 0.4s;
    top: 0;
}
p:hover {
    top: -1em;
}
/* Then on the pseudo, you add that missing piece and the transition is good to go! */
p:before,
p:after {
    top: inherit; /* This inherits transitioned top on the pseudo */
    position: relative; /* This finally enables transitioned top */
}
p:before {
    content: ':before';
}
p:after {
    content: ':after';
}