我有一个元素,它的宽度在其内容变化时需要进行动画处理。它的 width: auto
,这个值是不会改变的。我看过 这个技巧,但那只适用于两个值之间的转换并且其中一个值已经被设置了。我没有操作任何值,只是改变内容,并希望我的元素大小能够动画效果地改变。这在 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>
auto
动画化。要么使用你链接的“max-height”技巧,要么在页面加载时运行一个小脚本来设置最终高度。 - Asonsmax-width
技巧,您可以为其设置足够大的值以容纳最宽的内容。如果您发布您的 HTML 和 CSS,我可能能够为您制作一个示例。 - Asons