說到下劃線，相信大家都不陌生。
下劃線（underscore）是一種特殊符號，通常用於強調、標記或表示缺失的文字。它是一條水平線，位於文字的底部，與字母和數字等字元平齊。下劃線在不同的領域和場景中有不同的用途，如書寫、程式設計、表格製作等。
在書寫和排版中，下劃線通常用於強調特定的文字或標題。它可以用於單詞、短語或整個句子，以突出顯示重要資訊。
在計算機程式設計中，下劃線通常用於變數、函式和檔名的命名。根據程式語言的約定，下劃線可以用作識別符號的一部分，以提高可讀性和程式碼的可維護性。
相信，下劃線與動畫相結合的特效，您一定也不陌生。那麼，您見過這樣的下劃線特效嗎？
這樣的下劃線動畫有三個特點：
下劃線的高度可以控制的，並且下劃線的顏色是漸變的顏色；
預設沒有下劃線，而是等滑鼠經過的時候，下劃線從左側進入；
當滑鼠離開的時候，下劃線從右側離開。
而且，咱們的這個下劃線效果，在多行情況下也成立噢！
摩拳擦掌，咱們立刻開始寫一個出來吧！
一、漸變下劃線
我們直接在 HTML 中用一個 H1 標籤寫入文字。
<h1>將夢想懸掛於枝頭，在夏季的豐盛中飽滿，綻放；為夢想披星戴月，重新整理生命的溫度。</h1>
然後，我們給 H1 標籤一個漸變的背景色。
h1 {
background: linear-gradient(to right, #ec695c, #61c545);
}
得到一行文字具有一個漸變的背景色效果。
好奇寶寶要問了，說好的下劃線呢？搞背景幹嘛？
聰明的您一定猜到了，我們可以透過控制背景的高度和位置，讓其變成下劃線效果。
h1 {
background-image: linear-gradient(to right, #ec695c, #61c545);
background-repeat: no-repeat;
background-position-y: bottom;
background-size: 0 2px;
}
我們設定背景的水平位置為 right，豎直位置為 bottom，並設定背景的寬度為 auto，高度為 2px。
因為背景的高度僅為 2px，那麼需要設定背景重複為 no-repeat 讓其不重複，不然還是會重複的填充了整個 H1 標籤的範圍。
這樣，我們就把一個漸變色的下劃線給寫出來了。
二、滑鼠懸停效果
我們需要滑鼠進入文字區域的時候才顯示下劃線，並且效果是讓下劃線從左側開始變長，所以我們先讓背景的寬度為 0。
h1 {
background-image: linear-gradient(to right, #ec695c, #61c545);
background-repeat: no-repeat;
background-position-y: bottom;
background-size: 0 2px;
}
這個時候是不會顯示下劃線的，因為背景的寬度為 0。
於是，我們設定滑鼠懸停的時候，顯示下劃線。
h1:hover {
background-size: 100% 2px;
}
現在滑鼠懸停的下劃線效果是出現了，但是我們想要的是緩慢出現的動畫效果。於是我們給元素新增一個過渡屬性。
h1 {
background-image: linear-gradient(to right, #ec695c, #61c545);
background-repeat: no-repeat;
background-position-y: bottom;
background-size: 0 2px;
transition: background-size 1.5s;
}
我們透過 transition 屬性控制背景大小的過渡時長為 1.5s。
這樣，我們就實現了漸變下劃線的滑鼠懸停效果。
三、控制下劃線進與出的方向
滑鼠進入的時候，下劃線從左側進入了，但是滑鼠離開的時候，我們希望下劃線是從右側出去。需要實現這樣的效果，我們需要對 CSS 中的 hover 偽類做一個深入的剖析。
我們知道，hover 是 CSS 中的一個偽類，其效果是對所選元素的滑鼠懸停時候的樣式控制。
相信學習過 JavaScript的寶子們都會有一個疑惑，CSS 中有 hover，JavaScript 中卻沒有 hover 事件，而是需要使用 mouseenter 或者 mouseover 事件記錄滑鼠進入，然後再使用 mouseleave 或者 mouseout 事件記錄滑鼠離開。難道，hover 包含了滑鼠進入和滑鼠離開兩個事件機制？
帶著這樣的疑惑，我們大膽的使用背景大小做了一個實驗。
h1 {
background-image: linear-gradient(to right, #ec695c, #61c545);
background-repeat: no-repeat;
background-position-y: bottom;
background-size: 50% 2px;
transition: background-size 1.5s;
}
h1:hover {
background-size: 100% 2px;
}
得到如下結果：
透過效果，我們可以發現如下規律：
當滑鼠進入的時候，元素表現出來的樣式，會從原本的屬性值過渡到 hover 偽類中的屬性值；
當滑鼠離開的時候，元素表現出來的樣式，會從 hover 偽類中的屬性值過渡到原本的屬性值。
有了這個結論，我們就可以調整一下思路。在 h1:hover 中設定背景的位置為 left，讓滑鼠進入的時候，背景就是從左邊開始慢慢變寬。在 h1 中設定背景的位置為 right，這樣一來，滑鼠離開的時候，背景就從右邊開始慢慢變窄。
h1 {
background-image: linear-gradient(to right, #ec695c, #61c545);
background-repeat: no-repeat;
background-position-x: right;
background-position-y: bottom;
background-size: 0 2px;
transition: background-size 1.5s;
}
h1:hover {
background-position-x: left;
background-size: 100% 2px;
}
得到如下效果：
可以看到，我們已經成功了。
四、多行與文字
這個特效，基本上已經成功了，但是我們也看到文字之外，下劃線還多了長長的一條尾巴。而且，當文字是多行的時候，這個問題就凸顯的非常明顯了。
其實，這是因為 H1 標籤是塊級元素（又叫塊盒），預設情況下寬度是 100%，我們需要讓其變成行內元素（又叫行盒）。
h1 {
display: inline;
background-image: linear-gradient(to right, #ec695c, #61c545);
background-repeat: no-repeat;
background-position-x: right;
background-position-y: bottom;
background-size: 0 2px;
line-height: 2;
transition: background-size 1.5s;
}
h1:hover {
background-position-x: left;
background-size: 100% 2px;
}
設定行高 line-height 的值為 2，讓其顯示好看一些。
這樣，我們就完成了文字來回漸變下劃線的效果。
完整原始碼
今天原始碼比較少，還是那四個字，拿走不謝！O(∩_∩)O
h1 {
display: inline;
background-image: linear-gradient(to right, #ec695c, #61c545);
background-repeat: no-repeat;
background-position-x: right;
background-position-y: bottom;
background-size: 0 2px;
line-height: 2;
transition: background-size 1.5s;
}
h1:hover {
background-position-x: left;
background-size: 100% 2px;
}
↓
↓
↓
有沒有發現？如此簡單的一個效果，竟然蘊涵瞭如此豐富的 CSS 知識，所以說，任何一門技術，研究到極致都是一門學問……