As I commented, one can't animate auto (yet), so either use the max-width/max-height trick, or, if you need it to be more exact, set the width using a script.
With the max-width/max-height trick, give it a value big enough to accommodate the widest.
Stack snippet
.myspan {
display: inline-block;
font-size: 30px;
background-color: #ddd;
vertical-align: bottom;
}
.myspan::after {
content: " 0a0f12a ";
font-family: ionicons;
font-size: 80%;
display: inline-block;
max-width: 0;
transition: max-width .6s;
vertical-align: bottom;
overflow: hidden;
}
.myspan:hover::after {
max-width: 80px;
transition: max-width 1s;
}
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<span class="myspan">Hello!</span>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
