我正在使用css使下划线出现在跨度以下：
CSS：
.un{
text-decoration:none;
transition: all .5s ease-in;
}
.un:hover{
text-decoration:underline;
}
HTML：
<span class="un"> Underlined Text - Or to be underlined </span>
下划线只是出现，它不会在.5秒钟内移动，就像transition应该应用一样。为什么不？我该如何工作？
您无法过渡text-decoration。在现代浏览器中，尽管可以使用CSS进行相同的操作：
.un {
display: inline-block;
}
.un::after {
content: '';
width: 0px;
height: 1px;
display: block;
background: black;
transition: 300ms;
}
.un:hover::after {
width: 100%;
}<span class="un">Underlined Text - Or to be underlined</span>这是一种整齐的方法，您可以进行各种转换。（尝试使用页边距/对齐方式。您可以在不添加HTML的情况下做出一些很棒的效果。）
但是，如果您只需要简单的下划线，请使用边框：
.un {
transition: 300ms;
border-bottom: 1px solid transparent;
}
.un:hover {
border-color: black;
}<span class="un"> Underlined Text - Or to be underlined </span>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句