CSS (переход) после псевдоэлемента - как перейти к контенту, который отображается при наведении

<!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>

У меня есть этот примерный код выше. Я пытаюсь использовать "переход", чтобы текст: "- положительный!" требуется 3 секунды для слайд-шоу. Но он не работает. Как это исправить?

Ответ 1

after не является допустимым значением transition.

Вместо этого поставьте transition как свойство селектора :after.

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;
}

Демо

Вы также можете иметь другой переход на зависании и зависании. Это позволяет нам задерживать отображение псевдоэлемента, но не задерживать его.

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;
}

Демо

Вот список браузеров, поддерживающих переходы на псевдоэлементы: http://css-tricks.com/transitions-and-animations-on-css-generated-content/