在CSS中，衆所周知使用text-decoration:underline;可以爲任何文本添加下劃線的效果。
不過我們一般都在初始化裏把a標籤的下劃線去掉(text-decoration : none )，有沒有想過美化這些下滑下劃線呢~
理想的場景中，強調使用下劃線，它應該做到以下幾點：
- 下劃線應該位於文本基線（baseline）下方
- 下劃線應該可以跳過下行字母
- 能改變下線線的顏色、粗細和樣式
- 橫跨文本
- 在任何背景下都能正常工作
這些要求並不爲過，都是很合理的要求，但據我所知，到目前爲止，沒有哪個純CSS的方式能滿足上述的這些要求。仔細回憶一下，現在在Web中能使用CSS實現文本下線的方案常見的主要有：
- text-decoration
- border-bottom
- box-shadow
- background-image
接下來，我們分別來看看這些方法實現文本下劃線效果之間的利弊:
text-decoration
Web中最早用來給文本添加下劃線的屬性是text-decoration。
只要在元素上使用text-decoration:underline;文本就會有下劃線的效果。
如果文本字號較小時，效果看上去還不錯，但如果字號變大，效果略顯不太完美。
這些都是小問題，使用text-decoration屬性最大的問題是沒辦法自定義（沒辦法自定義下劃線的顏色、粗細和樣式）。
但對於下劃線的樣式，就沒辦法了。
border-bottom
text-decoration製作文本下劃線最大的侷限性是沒辦法自定義下劃線顏色、粗細和樣式。
如果針對於這方面，在CSS中的border-bottom可以改善這個侷限性。使用border-bottom，就可以改變下劃線顏色、粗細和樣式。
大家也已經注意到了，使用border-bottom來模擬文本下劃線的時，如果元素是塊元素的話，下劃線不僅僅是文本內容寬度長，它的長度將是元素盒子的長度。
這種效果可不是我們想要的效果。只有元素不是塊元素（可以顯示的通過display來改變，比如inline、inline-block、inline-flex之類），border-bottom製作的下劃線效果看上去纔是文本的下劃線，而不是容器的邊框（事實上它是容器的寬度，只不過容器的寬度和文本內容長度相同）。
另外，text-decoration製作的下劃線無法控制下劃線和文本之間距離，而border-bottom通過padding-bottom或者說line-height可以輕易的控制。
看上去border-bottom優勢不少（比如個性化定製，文本間距離），但它也有自己的侷限性。除了上面所說的，需要把元素顯式的聲明爲非塊元素之外，如果你的文本是多行時，只有最後一行文本才具有下劃線效果。
box-shadow
前面介紹的第二種方式是通過border-bottom來模擬text-decoration。大家是否還記得，CSS的box-shadow可以實現border的效果，box-shadow也可以實現text-decoration。
只不過我們採用box-shadow的內陰影inset來模擬:
background-image
使用background-image來做文本下劃線，而下劃線的樣式可以通使用linear-gradient來模擬，然後再通過background-postion以及background-size來控制下劃線的位置和線型樣式。
background-image模擬文本下劃線還有一個強大的優勢，除了使用漸變屬性之外，還可以使用圖片，比如下面的示例：
*如果使用border-bottom和box-shadow模擬文本下劃線的效果時，建議配合僞元素::after或::before來實現，這樣對於下劃線的位置控制更具靈活性。