我使用CSS来使下划线在一个范围内：
CSS：
.un{
text-decoration:none;
transition: all .5s ease-in;
}
.un:hover{
text-decoration:underline;
}
HTML：
简单地显示下划线,它不会移动超过0.5秒,就像转换应该适用一样.为什么不？我怎样才能做到这一点？
最佳答案
你不能过渡文字装饰.在现代浏览器中,您可以使用CSS执行相同的操作：
原文链接：https://www.f2er.com/css/427645.html.un {
display: inline-block;
}
.un:after {
content: '';
width: 0px;
height: 1px;
display: block;
background: black;
transition: 300ms;
}
.un:hover:after {
width: 100%;
}这是完成它的简洁方法,你可以获得各种过渡.(尝试使用边距/对齐.你可以制作一些很棒的效果而不添加你的HTML)
但是如果你只想要一个简单的下划线,请使用边框：
.un {
transition: 300ms;
border-bottom: 1px solid transparent;
}
.un:hover {
border-color: black;
}