Ancho automático de transición CSS
Tengo un elemento cuyo ancho me gustaría animar cuando su contenido cambia. Tienewidth: auto, y esto nunca cambia. He vistoeste truco, pero eso es para la transición entre dos valores y uno está configurado. No estoy manipulando los valores en absoluto, solo el contenido, y me gustaría que el tamaño de mi elemento cambie con la animación. ¿Es esto posible en CSS?
Aquí hay una versión simplificada de mi código:
.myspan {
background-color: #ddd;
}
.myspan:hover::after {
content: "\00a0\f12a";
font-family: Ionicons;
font-size: 80%;
}<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<html>
<body>
<span class="myspan">Hello!</span>
</body>
</html>Me gustaría animar el cambio de tamaño cuando el usuario pasa el cursor sobre el elemento.