首頁  >  文章  >  web前端  >  如何為 HTML 中的文字建立彩色底線?

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

Barbara Streisand
Barbara Streisand原創
2024-11-14 09:54:01617瀏覽

How to Create a Colored Underline for Text in 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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn