CSS过渡不适用于下划线答案

【问题标题】：CSS transition not working with underlineCSS过渡不适用于下划线
【发布时间】：2015-08-01 20:43:26
【问题描述】：

我正在使用 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 一样。为什么不？我怎样才能做到这一点？

【问题讨论】：

嗨 yak613，你在多个浏览器上试过吗？某些浏览器（例如旧版 IE）不允许转换。
正确编写代码可能比指责旧版本更好。 text-decoration 属性的转换是这里的问题，即使对于现代浏览器也是如此。 Transition support 现在已经很成熟了。

标签： html css

【解决方案1】：

2021 年更新：

对text-decoration-color 的支持已经走过了漫长的道路，常见的浏览器支持要求已经放宽，使其成为大多数新项目的可行选择。如果您只寻求颜色过渡，并且可以在没有 IE 支持的情况下进行，请参阅this answer below。

原答案：

您不能独立于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%;
}

&lt;span class="un"&gt;Underlined Text - Or to be underlined&lt;/span&gt;

这是最可定制的方式，您可以获得各种过渡。（尝试使用边距/对齐方式。您可以在不添加到 HTML 的情况下制作一些很棒的效果）
但如果你只想要一个简单的下划线，请使用边框：

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

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

&lt;span class="un"&gt; Underlined Text - Or to be underlined &lt;/span&gt;

【讨论】：

等不及css4出来了。也许过渡会像那样工作。
边框底部不像多行文本下划线那样工作。
@karoluS 如果您将显示设置为内联而不是内联块
伪元素的问题是它不适用于多行文本

【解决方案2】：

适用于多行文本且不需要边框底部模型的适当解决方案应如下所示。它利用text-decoration-color 属性。然而它不是supported by all browsers

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

&lt;span class="underlined-text"&gt;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.&lt;/span&gt;

【讨论】：

【解决方案3】：

a 标签有类似的问题，我想通了。

它没有动画的原因是因为您无法从 text-decoration: none 值转换。

就我而言，我所做的是将text-decoration-color 设置为transparent，然后在:hover 上，将text-decoration-color 设置为我想要的颜色值。

在您的特定情况下，您必须指定text-decoration: underline transparent，因为span 标签的初始text-decoration 值为none。然后，在 :hover 上，指定您想要的 text-decoration-color。

根据 MDN，FWIW、text-decoration 和 text-decoration-color 是动画属性。

参考资料：

Animatable CSS Properties - MDN

【讨论】：

这是 2020 年的正确答案。适用于除基于 Microsoft 的浏览器之外的所有设备。

【解决方案4】：

@Jacob 的回答非常简洁。但我无意中找到了一个没有人提供的解决方案：

.un {
  transition: .4s;
}

.un:hover {
  box-shadow: 0 3px 0 #7f7f7f;
}

&lt;span class="un"&gt; Underlined Text - Or to be underlined &lt;/span&gt;

使用不模糊的box-shadow 可以实现更加棘手和特殊的下划线效果。

【讨论】：

这是一个很好的答案，对我有用。

【解决方案5】：

您可以改用border-bottom，如下所示：

.un{
    border-bottom: 1px solid transparent;    
    transition: all .5s ease-in;
}
.un:hover{
    border-bottom: 1px solid black;    
}

&lt;span class="un"&gt; Underlined Text - Or to be underlined &lt;/span&gt;

【讨论】：

【解决方案6】：

以下是为下划线属性添加淡入淡出动画的解决方法：

.un{
    text-decoration: underline;
    text-decoration-color: #0000;
    transition: .2s;
}
.un:hover{
    text-decoration-color: #000;
}

【讨论】：

【解决方案7】：

因为text-decoration 是一个全有或全无的属性，您可能想尝试改用border-bottom。这是我之前的做法：

.un {
    border-bottom: 1px solid transparent;
    transition: border-color 0.5s ease-in;
}
.un:hover {
    border-color: black; /* use whatever color matches your text */
}

Text that is &lt;span class="un"&gt;wrapped in the “un” class&lt;/span&gt; has a border-bottom that appears as an underline that fades in.

将过渡应用到边框颜色从透明更改为文本颜色应该会呈现从无下划线到下划线的“淡入”外观。

【讨论】：

【解决方案8】：

如果你想要像下面这样宽度增加的下划线，你可以改用background-image。

.un {
  display: inline;
  background-image: linear-gradient(#e876f5, #e876f5);
  /*                   ↓ height of underline  */
  background-size: 0% 2px;
  /*                        ↓ y position of underline. you can change as 50% to see it. */
  background-position: 0% 100%;
  background-repeat: no-repeat;
  transition: background 0.3s linear;
}

.un:hover {
  background-size: 100% 2px;
}

&lt;span class="un"&gt;hover me&lt;/span&gt;

【讨论】：

【解决方案9】：

我发现此解决方案效果最佳、干净且简单。指定颜色后，过渡就会起作用。

@ref:https://www.w3schools.com/cssref/css3_pr_text-decoration-line.asp

a {
    color: #222;
    -webkit-text-decoration: none transparent;
            text-decoration: none transparent;
    -webkit-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}

a:focus,
a:hover {
    color: #222;
    -webkit-text-decoration: underline #222;
            text-decoration: underline #222;
}

【讨论】：

【解决方案10】：

这就是我将边框移近的方式。

<style type="text/css">
a {
    text-decoration: none;
    border-bottom: solid 1px transparent;
    font-weight: 600;
    color: rgb(126,93,142);
    -webkit-transition: all .5s;
    transition: all .5s;
    display: inline-block;
    line-height: 1em;
}
a:hover {
    text-decoration: none;
    border-bottom: solid 1px;
    color: #ce40ce;
    display: inline-block;
    line-height: 1em;
}</style>

<a href="#">La La La</a>

【讨论】：