Question

我正在使用CSS来使下划线达到一个范围：

CSS：

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

HTML：

transition

下划线只是显示，它不会移动超过.5秒，就像应用{{1}}一样。为什么不？我怎样才能做到这一点？

Answer 1

您无法转换text-decoration。在现代浏览器中，您可以使用CSS执行相同的操作：

＆＃13;

.un {
  display: inline-block;
}

.un:after {
  content: '';
  width: 0px;
  height: 1px;
  display: block;
  background: black;
  transition: 300ms;
}

.un:hover:after {
  width: 100%;
}

＆＃13;

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

＆＃13;

这是做到这一点的巧妙方法，你可以获得各种过渡。（尝试使用边距/对齐方式。你可以制作一些非常棒的效果，而无需添加HTML）
但是如果你只想要一个简单的下划线，请使用边框：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

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

Answer 3

一个适用于多行文本且不需要边框底样机的正确解决方案应如下所示。它利用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;
}

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

@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 5

我发现此解决方案最有效，干净，简单。一旦指定了颜色，过渡就会起作用。

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

Answer 6

由于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 <span class="un">wrapped in the “un” class</span> has a border-bottom that appears as an underline that fades in.

将过渡应用于从透明到文字颜色的边框颜色更改应该会给出从无下划线到下划线的“淡入”外观。

Answer 7

这就是我将边界向上移的方式。

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

Answer 8

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

Answer 9

这里是将淡入淡出动画添加到下划线属性的一种解决方法：

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

Answer 10

如果您希望像下面这样增加下划线的宽度，则可以改用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;
}

<span class="un">hover me</span>

CSS转换不适用于下划线

10 个答案: