CSS ширина перехода автоматически

У меня есть элемент, ширину которого я хотел бы анимировать при изменении его содержимого. Она имеетwidth: autoи это никогда не изменится. я виделэтот трюк, но это для перехода между двумя значениями и один установлен. Я вообще не манипулирую значениями, а только контентом, и мне бы хотелось, чтобы размер моего элемента изменялся с анимацией. Это вообще возможно в CSS?

Вот упрощенная версия моего кода:

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

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

Ответы на вопрос(1)

Ваш ответ на вопрос