CSS (transición) después de un pseudo elemento: cómo hacer la transición del contenido que se muestra al pasar el mouse

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

Tengo este código de ejemplo arriba. Estoy tratando de usar 'transición' para que el texto: '- positivo!' tarda 3 segundos en deslizarse / aparecer. Pero no está funcionando ... ¿Cómo solucionarlo?

Respuestas a la pregunta(1)

Su respuesta a la pregunta