Largura automática da transição CSS

Question

Jul 28, 2016, 07:54 PM

animation css css3 css-animations css-transitions

Largura automática da transição CSS

Eu tenho um elemento cuja largura eu gostaria de animar quando o conteúdo é alterado. Temwidth: auto, e isso nunca muda. eu tenho vistoesse truque, mas isso é para fazer a transição entre dois valores e um é definido. Não estou manipulando os valores, apenas o conteúdo, e gostaria que o tamanho do meu elemento mudasse com a animação. Isso é possível em CSS?

Aqui está uma versão simplificada do meu 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>

Gostaria que a mudança de tamanho fosse animada quando o usuário passasse o mouse sobre o elemento.