Você pensou que não é possível usar CSS transitionem outro navegador além do Firefox? Em seguida, acorde e assista à jam session de Roman Komarov @Fronteers 2012 sobre como usar transitionpseudoelementos em quase todos os navegadores.
Como é que isso funciona?
Se você não entende o que ele está falando no vídeo, tenho uma explicação para você:
HTML
<a href="#"
data-tooltip="This is a pseudo-element tooltip"
class="tooltip">
Just a link with a tooltip
</a>CSS
coisas do elemento pai (link)
.tooltip {
display: inline-block;
overflow: hidden;
height: 1.575em;
transition: all .35s ease-in-out;
/*
* the background-color of the pseudo-element:
*
* first value if not:hover
* second value if :hover
*/
background: linear-gradient(transparent 10%, rgba(130, 0, 0, .55)) no-repeat -1px;
/* hide the background on the parent */
background-position: -1px 0;
background-size: 1px;
/* hide the pseudo-element text */
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
}elemento pai em: hover
.tooltip:hover {
/* show the pseudo-element text */
text-shadow: 0 0 0 white;
/* show the pseudo-element background */
background-position: -1px 100%;
}coisas de pseudo-elemento
.tooltip:before {
position: absolute;
/* get the tooltip-text */
content: attr(data-tooltip);
/* styling */
font-size:.75em;
padding: .25em .45em;
margin: -2em 0 0 -.25em;
border-radius: 1em;
pointer-events: none;
/* hide the pseudo-element text */
color: transparent;
/* get the background of the parent element */
background: inherit;
background-size: 102% 90em;
/* get the text-shadow of the parent element
* to show the pseudo-element on :hover */
text-shadow: inherit;
}