CSS过渡不适用于下划线 [英] CSS transition not working with underline

问题描述

我正在使用css使下划线出现在跨度以下:

I am using css to make an underline come under a span:

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一样.为什么不?我该如何进行这项工作?

The underline simply appears, it doesn't move in over .5 seconds, like the transition should apply. Why not? How can I make this work?

推荐答案

您不能转换text-decoration.在现代浏览器中，您可以使用CSS进行相同的操作:

You cannot transition text-decoration. In modern browsers, you can do the same thing with CSS though:

.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的情况下做出一些很棒的效果)
但是，如果您只需要简单的下划线，请使用边框:

That is a neat way to do it, you can get all sorts of transitions. (Try playing around with the margins/alignment. You can make some awesome effects without adding to your HTML)
But if you just want a simple underline, use a border:

.un {
  transition: 300ms;
  border-bottom: 1px solid transparent;
}

.un:hover {
  border-color: black;
}

<span class="un"> Underlined Text - Or to be underlined </span>

这篇关于CSS过渡不适用于下划线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！