在Web中給文本添加下劃線常常出現在鏈接的文本上，早期一般使用text-decoration屬性給文本添加下劃線、刪除線等。除了text-decoration之外，CSS還有很多技術方案可以給文本添加下劃線效果，比如border-bottom、box-shadow、background-image等。對于Web開發者而言，更慶幸的是，CSS還有更多的，更靈活的特性實現文本下劃線的效果。在這篇文章中，將和大家一起聊聊CSS中其他的特性怎么實現一個更有創意的效果。

新的text-decoration特性

text-decoration并不是一個新特性，在CSS 2.1中，text-decoration就可以使用none、underline、overline和line0-through給文本添加下劃線、刪除線等效果。只不過，在新的CSS規范中(CSS Text Decoration Module Level 3 和 Level 4)添加了一些新特性。比如：

text-decoration-line: none | [ underline || overline || line-through || blink ]

text-decoration-style: solid | double | dotted | dashed | wavy

text-decoration-color:

text-decoration-thickness: auto | from-font |

text-decoration-skip: none | [ objects || [ spaces | [ leading-spaces || trailing-spaces ] ] || edges || box-decoration ]

text-decoration-skip-ink: auto| none

其中text-decoration-line、text-decoration-style和text-decoration-color還可以簡寫成text-decoration：

text-decoration: || ||

除些之外，還新增了text-underline-position和text-underline-offset屬性給文本設置下劃線樣式：

text-underline-position: auto | [ under || [ left | right ] ]

text-underline-offset: auto |

來看一個簡單的示例：

自定義下劃線效果

文章開頭就提到過，除了使用text-decoration-*和text-underline-*屬性可以給文本添加下劃線效果之外，還可以使用一些其他方法來給文本添加自定義下劃線的效果，比如下面兩篇文章中提到的方法：

隨著CSS的Clipping和Masking技術越來越成熟，我們可以配合CSS的偽元素實現一些更有創意的下劃線效果。

使用clip-path給文本添加下劃線

div {

width: 200px;

height: 200px;

background-color: #f36;

animation: melt-enter 2s ease-in alternate infinite,melt-leave 4s ease-out 2s alternate infinite;

cursor: pointer

}

@keyframes melt-enter {

0% {

clip-path: path('M0 -0.12C8.33 -8.46 16.67 -12.62 25 -12.62C37.5 -12.62 35.91 0.15 50 -0.12C64.09 -0.4 62.5 -34.5 75 -34.5C87.5 -34.5 87.17 -4.45 100 -0.12C112.83 4.2 112.71 -17.95 125 -18.28C137.29 -18.62 137.76 1.54 150.48 -0.12C163.19 -1.79 162.16 -25.12 174.54 -25.12C182.79 -25.12 191.28 -16.79 200 -0.12L200 -34.37L0 -34.37L0 -0.12Z');

}

100% {

clip-path: path('M0 199.88C8.33 270.71 16.67 306.13 25 306.13C37.5 306.13 35.91 231.4 50 231.13C64.09 230.85 62.5 284.25 75 284.25C87.5 284.25 87.17 208.05 100 212.38C112.83 216.7 112.71 300.8 125 300.47C137.29 300.13 137.76 239.04 150.48 237.38C163.19 235.71 162.16 293.63 174.54 293.63C182.79 293.63 191.28 262.38 200 199.88L200 0.13L0 0.13L0 199.88Z');

}

}

@keyframes melt-leave {

0% {

clip-path: path('M0 0C8.33 -8.33 16.67 -12.5 25 -12.5C37.5 -12.5 36.57 -0.27 50 0C63.43 0.27 62.5 -34.37 75 -34.37C87.5 -34.37 87.5 -4.01 100 0C112.5 4.01 112.38 -18.34 125 -18.34C137.62 -18.34 138.09 1.66 150.48 0C162.86 -1.66 162.16 -25 174.54 -25C182.79 -25 191.28 -16.67 200 0L200 200L0 200L0 0Z');

}

100% {

clip-path: path('M0 200C8.33 270.83 16.67 306.25 25 306.25C37.5 306.25 36.57 230.98 50 231.25C63.43 231.52 62.5 284.38 75 284.38C87.5 284.38 87.5 208.49 100 212.5C112.5 216.51 112.38 300.41 125 300.41C137.62 300.41 138.09 239.16 150.48 237.5C162.86 235.84 162.16 293.75 174.54 293.75C182.79 293.75 191.28 262.5 200 200L200 200L0 200L0 200Z');

}

}

效果如下：

如果你的瀏覽器沒看到任何效果的話，請更換Firefox 63+瀏覽器查閱，你將會看到下面這樣的效果：

將這個創意放到文本下劃線中也是可以的，只不過需要借助CSS的偽元素：

div {

display: inline-flex;

font-size: 30px;

position: relative;

cursor: pointer;

&::after {

content: '';

position: absolute;

top: calc(100% + 6px);

left: 0;

right: 0;

height: 10px;

background-color: currentColor;

animation: 2s melt-enter;

}

&:hover::after {

color: #f36;

animation: 2s melt-leave;

}

}

效果如下：

使用SVG實現自定義下劃線效果

使用clip-path給文本添加下劃線效果，可以幫助我們實現很多具有創意的效果，還可以配合CSS的animation來實現帶有動畫效果的下劃線。其實，除了上面提到的方案之外，我們還可以在background-image中使用SVG給文本添加很多與眾不同的下劃線效果。比如：

上面的示例中引用像下面這樣的一個使用SVG繪制的線條：

.st0{fill:#f3bc34}

總結

以上是生活随笔為你收集整理的HTML文本下划线效果,聊聊CSS中文本下划线_CSS, SVG, masking, clip-path, 会员专栏, text-decoration 教程_W3cplus...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。