CSS Transition Auto Width

Question

Jul 28, 2016, 07:54 PM

css css-animations css-transitions css3 animation

CSS Transition Auto Width

Ich habe ein Element, dessen Breite ich animieren möchte, wenn sich der Inhalt ändert. Es hatwidth: auto, und das ändert sich nie. Ich habe gesehendieser Trick, aber das ist für den Übergang zwischen zwei Werten und einem gesetzt. Ich bearbeite überhaupt nicht die Werte, sondern nur den Inhalt, und ich möchte, dass sich die Größe meines Elements mit der Animation ändert. Ist das überhaupt in CSS möglich?

Hier ist eine vereinfachte Version meines Codes:

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

Ich möchte, dass die sich ändernde Größe animiert wird, wenn der Benutzer den Mauszeiger über das Element hält.