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

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

一個適用於多行文本且不需要邊框底部模型的正確解決方案應如下所示。 它利用了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 4

您可以改為使用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 5

這是將淡入淡出動畫添加到下划線屬性的解決方法：

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

Answer 6

如果你想要一個像下面這樣寬度增加的下划線，你可以使用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>

Answer 7

我發現這個解決方案效果最好，干凈且簡單。 一旦您指定了顏色，過渡就會起作用。

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

由於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 9

這就是我將邊界向上拉近的方式。

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

我有一個類似的問題a標簽，我想通了。

它沒有設置動畫的原因是因為您無法從text-decoration: none過渡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是可動畫設置的屬性。

參考文獻：

• 動畫CSS屬性-MDN