CSS过渡自动宽度

我有一个元素,当它的内容发生变化时,它的宽度我想要动画.它有宽度：自动,这永远不会改变.我见过 this trick,但这是为了在两个值之间转换而设置一个.我根本没有操纵值,只是内容,我希望我的元素大小随着动画而改变.这在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>

当用户将鼠标悬停在元素上时,我希望将大小更改为动画.

解决方法

正如我评论的那样,使用“max-width”/“max-height”技巧.

给它一个足够大的值来容纳最宽的.

.myspan {
  display: inline-block;
  font-size: 30px;
  background-color: #ddd;
  vertical-align: bottom;
}
.myspan::after {
  content: " \00a0\f12a ";
  font-family: ionicons;
  font-size: 80%;  
  display: inline-block;
  max-width: 0;
  transition: all 1s;
  vertical-align: bottom;
  overflow: hidden;
}
.myspan:hover::after {
  max-width: 80px;
  transition: all 1s;
}

<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />

<span class="myspan">Hello!</span>

CSS过渡自动宽度

解决方法

相关文章