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应该应用的那样.为什么不？我怎样才能做到这一点？

Answer 1

你无法过渡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>

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>

Answer 3

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

.un {
  transition: .4s;
}

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

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

使用box-shadow无模糊可以实现更加棘手和特殊的下划线效果。
如果您使用大量页面，这可能会使您的页面运行速度变慢。

Answer 4

我有一个类似的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，FWIWtext-decoration和text-decoration-color是动画属性。

参考：

• 可动画的 CSS 属性 - MDN