CSS (transition) après un pseudo-élément - comment faire passer le contenu qui montre sur hover

<!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. Je suis en train d'utiliser de "transition", de sorte que le texte: "positif!" prend 3 secondes à glissière/montrer. Mais il ne fonctionne pas.. Comment pour résoudre le problème?

source d'informationauteur

  1. 29

    after n'est pas une valeur valide de transition.

    Au lieu de mettre transition comme une propriété de la :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 un autre passage sur le vol stationnaire et stationnaire de l'etat. Cela nous permet d'avoir un délai pour afficher le pseudo-élément, mais aucun délai pour la 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 des navigateurs qui prennent en charge les transitions sur les pseudo-éléments:
    http://css-tricks.com/transitions-and-animations-on-css-generated-content/