在討論如何設(shè)置下劃線樣式之前，我們先來思考一個問題：我們是否應(yīng)該使用下劃線？

在平面設(shè)計中，下劃線通常被認(rèn)為不夠精緻。有更好的方法來強調(diào)重點、建立層級和區(qū)分標(biāo)題。

Butterick 的《實用排版》中對此有明確的建議：

如果你想使用下劃線，不如改用粗體或斜體。在特殊情況下，例如標(biāo)題，你也可以考慮使用全部大寫、小型大寫或更改字號。仍然不相信嗎？我建議你找一本圖書、一份報紙或一本雜誌看看是否有下劃線文本。這種風(fēng)格主要與超市小報相關(guān)聯(lián)。

但網(wǎng)絡(luò)環(huán)境有所不同。超鏈接是互聯(lián)網(wǎng)的定義性特徵；從互聯(lián)網(wǎng)誕生之日起，它們就一直帶有下劃線。這是一個普遍理解的約定，其含義非常清晰——下劃線表示鏈接。

然而，許多流行的網(wǎng)站已經(jīng)取消了下劃線：例如《紐約時報》、《紐約雜誌》、《華盛頓郵報》、彭博社、亞馬遜、蘋果、GitHub、推特、維基百科。谷歌首席設(shè)計師Jon Wiley 在2014 年解釋說，從搜索結(jié)果頁面移除下劃線可以創(chuàng)造更簡潔的外觀。值得注意的是，這些網(wǎng)站中的大多數(shù)都保留了自網(wǎng)絡(luò)誕生以來一直作為瀏覽器默認(rèn)設(shè)置的略微不同的鮮豔藍(lán)色(#0000EE)。雖然這為大多數(shù)用戶提供了視覺提示，但可能不足以通過WCAG 可訪問性合規(guī)性測試。

顏色不能作為唯一視覺手段來傳達信息、指示操作、提示響應(yīng)或區(qū)分視覺元素。 — WCAG 2.1

WCAG 並沒有嚴(yán)格規(guī)定必須為鏈接使用下劃線，但它確實推薦這樣做。色盲用戶需要能夠識別鏈接。你可以通過其他方式來區(qū)分它們，例如使用粗體字重?；蛘吣憧梢员Ａ暨@個長期建立的視覺輔助功能。但如果我們要使用下劃線，我們希望它們看起來漂亮。 Medium 的設(shè)計師Marcin Wichary 將完美的下劃線描述為：

[…] 可見但不過分顯眼——讓人們意識到哪些內(nèi)容是可點擊的，但不會過分吸引註意力。它應(yīng)該與文本保持恰當(dāng)?shù)木嚯x，舒適地位於文本下方，即使下降體也佔據(jù)相同的空間。

傳統(tǒng)上，實現(xiàn)這一點需要一些CSS技巧。

我們過去使用的技巧

這是一個所有開發(fā)者都熟悉的一個技巧： border-bottom 。通過使用border-bottom模擬下劃線，我們可以控制顏色和粗細(xì)。這些偽下劃線有一個問題：與文本的距離過大。它們位於字母下降體的下方。你可以通過使用line-height來解決這個問題，但這又會帶來自身的問題。類似的技術(shù)利用box-shadow 。 Marcin Wichary 首創(chuàng)了最複雜的技術(shù)，使用background-image來模擬下劃線。這些都是有用的技巧，但現(xiàn)在已經(jīng)不再需要了。

設(shè)置真正的下劃線樣式

最終，多虧了兩個新的CSS 屬性，我們可以區(qū)分鏈接而不會犧牲樣式。

• text-underline-offset控制下劃線的位置。
• text-decoration-thickness控制下劃線、上劃線和刪除線的粗細(xì)。

根據(jù)WebKit 博客：

你也可以為這兩個屬性指定from-font ，它將從使用的字體文件本身提取相關(guān)的度量值。

UX 代理機構(gòu)Clearleft 大膽地使用了（偽）下劃線，通過多彩的樣式清晰地吸引人們注意鏈接。這是一個偽下劃線示例：

 <code>a { text-decoration: none; border-bottom: #EA215A 0.125em solid; }</code>

請注意，這個偽下劃線明顯位於字母“y”的下降體下方：

這是相同的段落，使用DevTools 將相同的樣式應(yīng)用於使用新的CSS 屬性的真正下劃線：

 <code>a { text-decoration-color: #EA215A; text-decoration-thickness: .125em; text-underline-offset: 1.5px; }</code>

你會注意到我在示例代碼中使用了em 單位。規(guī)範(fàn)強烈建議使用它而不是像素，以便粗細(xì)隨字體縮放。

這些屬性已經(jīng)在Safari 中發(fā)布，並將出現(xiàn)在Firefox 70 中。

隨著微軟Edge 瀏覽器遷移到Chromium，我們最終將獲得對text-decoration-style屬性的跨瀏覽器支持，該屬性提供以下選項：實線（默認(rèn)）、雙線、點線、虛線和波浪線。組合使用這些新屬性，可以打開一系列可能性。

然而，也許網(wǎng)絡(luò)上對下劃線的最大改進是無需開發(fā)者做任何事情就能實現(xiàn)的。在過去，下降體會被下劃線無情地切斷，這遠(yuǎn)非優(yōu)雅。開發(fā)者過去常常通過應(yīng)用與背景顏色匹配的文本陰影來解決這個缺點。 text-decoration-skip-ink提供了一種更好的方法來為下降體留出空間。

方便的是，它被設(shè)置為下劃線的新的默認(rèn)值；這意味著下劃線的外觀得到了改進，而大多數(shù)Web 開發(fā)者仍然不知道這個屬性的存在。如果你希望下劃線跨越字形，你可以將此屬性設(shè)置為none 。

以上是帶有真實下劃線的造型鏈接的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！