web-dev-qa-db-fra.com

CSS (transition) après un pseudo-élément - comment faire la transition du contenu qui s'affiche en survol

<!DOCTYPE html>
<html>
<head>
<style> 

div
{
transition:after 3s;
-webkit-transition:after 3s;
}

div:hover:after
{
content:"- positive!";
}
</style>
</head>
<body>

<div>Test</div>

</body>
</html>

J'ai cet exemple de code ci-dessus. J'essaie d'utiliser 'transition' pour que le texte: '- positif!' prend 3 secondes pour glisser/afficher. Mais ça ne marche pas .. Comment y remédier?

csscss-transitions
25
user1680771

after n'est pas une valeur valide de transition.

Au lieu de cela, mettez transition comme propriété de :after sélecteur.

[~ # ~] html [~ # ~] 

<div>Test</div>

[~ # ~] css [~ # ~] 

div:after {
    content:" - positive!";
    position: relative;
    opacity: 0;
    top: -20px;
    -webkit-transition: all 3s;
    transition: all 3s;
}
div:hover:after {
    opacity: 1;
    top: 0px;
}

Démo

Vous pouvez également avoir une transition différente sur l'état de survol et de survol. Cela nous permet d'avoir un délai pour montrer le pseudo-élément mais pas de délai pour le cacher.

[~ # ~] css [~ # ~] 

div:after {
    content:" - positive!";
    position: relative;
    opacity: 0;
    top: -20px;
    -webkit-transition: all 250ms;
    transition: all 250ms;
}
div:hover:after {
    opacity: 1;
    top: 0px;
    -webkit-transition: all 3s;
    transition: all 3s;
}

Démo

Voici une liste de navigateurs qui prennent en charge les transitions sur les pseudo-éléments: http://css-tricks.com/transitions-and-animations-on-css-generated-content/

44
3dgoo