正如我所评论的,还不能设置动画
auto,所以请使用
max-width/
max-height技巧,或者,如果需要更精确的设置,请使用脚本设置宽度。
使用
max-width/
max-height技巧,为它提供足够大的值以容纳最宽的值。
堆栈片段
.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://pre.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" /><span >Hello!</span>


