CSS 过渡不适用于下划线

Question

我正在使用 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>

下划线只是出现，它不会在超过 0.5 秒内移动，就像 transition 应该适用的那样。为什么不？我怎样才能使这项工作？

原文由 yaakov 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

2021 年更新：

对 text-decoration-color 的支持已经取得了长足的进步，常见的浏览器支持要求已经放宽，使其成为大多数新项目的可行选择。如果您只是寻求颜色过渡，并且可以在没有 IE 支持的情况下使用，请参阅 下面的答案。

---

原答案：

您不能独立于 color 更改 text-decoration 的颜色。但是，您可以使用伪元素实现类似的效果：

 .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>

原文由 Jacob G 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

一个适用于多行文本且不需要边框底部模型的正确解决方案应该如下所示。它利用 text-decoration-color 属性。

请记住， 旧浏览器不支持 它

 .underlined-text{
 text-decoration: underline;
 text-decoration-color: transparent;
 transition: 1s;

 /*add those for opera and mozilla support*/
 -webkit-text-decoration-color: transparent;
 -moz-text-decoration-color: transparent;
}

.underlined-text:hover{
 text-decoration-color: red;

 /*add those for opera and mozilla support*/
 -webkit-text-decoration-color: red;
 -moz-text-decoration-color: red;
}

 <span class="underlined-text">You're the greatest thing that has ever been or ever will be. You're special. You're so very special. It is a lot of fun. You don't want to kill all your dark areas they are very important. In your world you can create anything you desire.</span>

原文由 karoluS 发布，翻译遵循 CC BY-SA 4.0 许可协议