如何為 HTML 中的文字建立彩色底線？

自訂下劃線顏色

在HTML 編碼中，您可能會遇到這樣的情況：想要用特定顏色為文字添加下劃線，但保留文字本身有不同的顏色。當您使用單一元素來設定文字和下劃線的樣式並導致顏色統一時，就會出現問題。

要解決此問題，您可以利用最新的 CSS3 屬性：text-decoration-color。此屬性可讓您獨立控制下劃線的顏色，使您能夠在同一元素中建立一種顏色的文字和另一種顏色的下劃線。

以下是CSS 程式碼範例：

p {
  text-decoration: underline;
  -webkit-text-decoration-color: red; /* for Safari browsers */
  text-decoration-color: red;
}

以及一個顯示結果的HTML 範例：

<p>Black text with red underline in one element - no wrapper elements here!</p>

透過實作此CSS 屬性，您可以分割文字和屬性底線的樣式，實現您想要的顏色自訂，而不需要額外的包裝器元素。

以上是如何為 HTML 中的文字建立彩色底線？的詳細內容。更多資訊請關注PHP中文網其他相關文章！