摘要：簡介有許多種不同的方式來實現(xiàn)下劃線，你也許還記得這篇文章。這是一條基本的下劃線，它大小合適。想法是用線性漸變和來創(chuàng)建一個在水平方向重復的背景圖。可以實現(xiàn)漂亮的可交互的下劃線。

本文來自css-tricks，介紹了在不同的場景下實現(xiàn)下劃線的7種方式。

有許多種不同的方式來實現(xiàn)下劃線，你也許還記得Crafting link underlines on Medium這篇文章。Medium也不是想做什么瘋狂的事情，他們只是想讓他們的文字下面好看一點。

這是一條基本的下劃線，它大小合適。絕對比瀏覽器的默認樣式好看的多。所以，看上去Medium為了實現(xiàn)這個效果也經(jīng)歷了許多困難。兩年后，實現(xiàn)一個好看的下劃線依然一樣困難

為什么不能直接用text-decoration: underline呢？如果我們談論的是理想場景，underline需要滿足下面這些場景：

在基線下面定位

跳過descenders

改變顏色，厚度（thickness）和樣式

重復包裹文字

在任何背景下都生效

我認為這些需求都是很合理的，但是到目前為止，沒有一種直觀的方式用css來實現(xiàn)上面的所有目標

因此，能實現(xiàn)下劃線的方法都有哪些？

text-decoration

border-bottom

box-shadow

background-image

SVG filters

Underline.js (canvas)

text-decoration-*

讓我們來一個個的討論這些方法的好處和壞處

text-decoration是最直接的實現(xiàn)方式，只用一個屬性就能實現(xiàn)給文字添加下劃線。當字體比較小的時候，看上去沒什么問題，但是當字體變大的時候，看上去就有點笨拙了。

{% codepen lixuejiang aByLLO 0 %}

text-decoration最大的問題是缺少定制化，它直接使用文字的顏色和字體，不能跨瀏覽器修改樣式，更多內(nèi)容后面會介紹

使用方便

定位在基線下面

在Safari和iOS里跳過了descenders

多行也沒問題

所有的背景也ok

在其他瀏覽器里不能跳過descenders

不能修改顏色，厚度和樣式

border-bottom在快速和定制化之間提供了一個很好的平衡。這個方法用了css邊框，你可以修改顏色，厚度和樣式。
inline元素的border-bottom長這樣

{% codepen lixuejiang XNaeVW 0 %}

最大的問題是下劃線離文本有多遠--下劃線就在descenders下面。你可以通過讓元素變成inline-block然后減少line-height來改變這個距離。但是你就失去了包裹文本的能力。單行元素沒問題，其他情況就不行了。

{% codepen lixuejiang xRLXYZ 0 %}

另外，你可以用text-shadow來蓋住descenders附近的部分，但是你需要用和背景色一樣的顏色。這一位置他只能在固定顏色的背景上生效，漸變的背景和背景圖沒用。

用text-shadow可以跳過descenders

可以改變顏色，厚度和樣式

可以對顏色和厚度實施漸變和動畫

inline-block自動包裹

用text-shadow可以支持任意背景

定位很遠，而且很難重定位

需要使用一系列不相干的屬性

Janky text selection when using text-shadow ？？

box-shadow需要兩個inset box shadows來實現(xiàn)下劃線：其中一個創(chuàng)建一個矩形，另外一個蓋在上面。這種方法要能生效的前提是使用固定顏色的背景

{% codepen lixuejiang eBEeOp 0 %}
你也可以用text-shadow來模擬文字的descenders和underline之間的空白。但是如果下劃線和文字的顏色不一樣的時候，或者空白最夠薄的時候，他就不能像text-decoration一樣很好的工作了。

可以定位在基線下面

用text-shadow可以跳過descenders

可以改變顏色，厚度

多行也能生效

不能修改樣式

不能在漸變和背景圖的情況下生效

background-image是最接近我們想要的而且問題最少的實現(xiàn)方式。想法是用線性漸變和background-position來創(chuàng)建一個在水平方向重復的背景圖。然后設置元素display: inline

{% codepen lixuejiang LbjOEj 0 %}

下面這個方法沒有用線性漸變，而是用的背景圖，你可以用你自己的圖片來實現(xiàn)一些很酷的效果：
{% codepen lixuejiang RoZjNy 0 %}

可以定位在基線下面

用text-shadow可以跳過descenders

可以改變顏色，厚度（允許0.5像素）和樣式

可以使用自定義圖片

多行也能生效

用text-shadow可以支持任意背景

在不同的分辨率，不同的瀏覽器和不同的縮放情況下，圖片的尺寸不一樣

這種方法我一直在研究。你可以創(chuàng)建一個畫了一條線的SVG filter行內(nèi)元素，把他該在文本上面。然后給這個元素設置一個ID，之后就可以在css里引用這個元素：url(‘#svg-underline’)
其中一個優(yōu)勢就是在不依賴text-shadow的情況下支持透明。這也就意味著在任何背景上都可以跳過descenders，包括漸變和背景圖。但是他只支持單行的文本

{% codepen lixuejiang bBrYEJ 0 %}

在 Chrome 和 Firefox里看起來像這樣：

IE, Edge, 和 Safari的瀏覽器支持有問題，很難在css里測試瀏覽器對SVG filter的支持?？梢杂?b>@supports屬性。但是這只能測試引用是否生效。而不是filter自己。這個方法不支持跨瀏覽器。

可以定位在基線下面

跳過descenders

可以改變顏色，厚度和樣式

支持任意背景

不支持多行

在 IE, Edge, 或者 Safari里不生效，在這幾個瀏覽器里可以用text-decoration

Underline.js很屌，如果你還沒看過他的tech demo,趕緊停下來，去看一看。有一個很酷炫的時長9分鐘的介紹它是如何工作的視頻。在這里我會簡短的介紹一下：它用標簽來畫下劃線。這是一種很新穎的方法，而且能效果出奇的好。

盡管有名氣。Underline.js只是個demo。你不能在不修改他們的代碼的情況下直接在你的項目里引用它。
在這里把它作為一種實現(xiàn)方式來討論還是很值得的。可以實現(xiàn)漂亮的可交互的下劃線。但是你必須得寫一些JavaScript代碼。

還記得text-decoration里提到的后面會詳細介紹嗎？
text-decoration自身也能很好的工作，你也可以添加一些實驗性的屬性來定義樣式：

Remember the “more on that later” part? Well, here we are.

text-decoration-color

text-decoration-skip

text-decoration-style

也不要太激動。需要考慮瀏覽器兼容性

text-decoration-color允許你改變下劃線的顏色，可以和文字顏色不一樣。它的跨瀏覽器支持比想象中的要好。在Firefox和Safari里都能正常運行。
但是有一個問題：如果沒有清除descenders，Safari會把下劃線放在文字上面?
Firefox：

Safari：

text-decoration-skip可以跳過descenders

這個屬性是非標準的，現(xiàn)在只有Safari支持。所以需要加-webkit-前綴。Safari默認啟用這個屬性，這也就是為什么在沒有指定這個值的時候，下劃線也跳過了descenders
如果你在用Normalize，你應該知道最近的版本禁止了這個屬性，來保證各個瀏覽器的顯示一直。如果你想要一些夢幻般的下劃線，你可以打開這個屬性

text-decoration-style提供了像border-style一樣的屬性。另外還添加了wavy lines:

dashed

dotted

double

solid

wavy

目前只有FireFox支持這個屬性：

是不是看上去很眼熟？

text-decoration-*這一系列屬性確實比用其他的css屬性來實現(xiàn)下劃線要直觀。但是看一看我們一開始的需求。這些屬性不支持定義厚度和位置。

經(jīng)過一番研究，發(fā)現(xiàn)了下面兩個屬性：

text-underline-width

text-underline-position

他們出現(xiàn)在早起的css草案里，但是因為缺少利潤而沒被實現(xiàn)。不用怪他們（指瀏覽器廠商）。

所以實現(xiàn)下劃線最好的方式是什么？

這就要看實際情況了
對于字體小的問題，我推薦text-decoration，然后用text-decoration-skip。在大多數(shù)瀏覽器里看起來有點平淡。但是下劃線就那樣，人們也不會介意。但是如果你足夠耐心，總是有機會的?？傆幸惶欤聞澗€在不需要更改任何東西的情況下變得很帥氣。

對于body text，可以用background-image。它能生效，而且很不錯，還有Sass mixins。如果下劃線很細或者需要和文本不一樣 的顏色的時候，還可以用text-shadow

對于單行的文本，可以用border-bottom.
如果想跳過漸變和背景圖上的descenders，用SVG filters。
將來的瀏覽器支持足夠好了，答案是text-decoration-* 屬性

原文