如何使用 CSS 自訂文字下劃線顏色？

使用 CSS 自訂文字下劃線顏色

在網頁設計中，向文字加上底線是強調或突顯訊息的常見做法。但是，如果您想透過更改下劃線的顏色來添加獨特的感覺該怎麼辦？這可能嗎？

是的，可以使用 CSS 來改變文字下方線條的顏色。您可以使用以下兩種方法：

方法 1：使用 text-decoration-color

最直接的方法是使用 text-decoration-color 屬性。此屬性指定下劃線的顏色，允許​​您獨立於文字顏色對其進行自訂。

例如，要建立帶有藍色底線的紅色文本，您可以使用以下CSS：

<code class="css">text-decoration-color: blue;</code>

方法2：使用border-bottom

另一個方法是使用border-bottom 屬性。該屬性在文字底部建立一個邊框，可以模擬下劃線。透過設定 border-bottom-color 屬性，您可以指定下劃線的顏色。

例如，以下是使用border-bottom 實現與方法1 相同的效果的方法：

<code class="css">border-bottom: 1px solid blue;
text-decoration: none;</code>

注意： 現代瀏覽器支援text-decoration-color屬性。如果您需要支援較舊的瀏覽器，您可能需要使用 border-bottom 方法來實現相容性。

以上是如何使用 CSS 自訂文字下劃線顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！