首頁 > web前端 > css教學 > 主體

如何使用 CSS3 創建帶有紅色文字的黑色底線?

Mary-Kate Olsen
發布: 2024-11-11 20:31:02
原創
769 人瀏覽過

How to Create a Black Underline with Red Text Using CSS3?

在不影響文字顏色的情況下更改下劃線顏色

在提供的程式碼片段中,您已使用HTML 標記建立了帶下劃線的文字。雖然文字本身是紅色的,但您試圖將下劃線顏色分離為黑色。讓我們來探索一個 CSS3 解決方案來應對這個挑戰。

引入 text-decoration-color

CSS3 現在引入了 text-decoration-color 屬性,解決了您的困境。透過此屬性,您可以操縱文字裝飾(例如底線)的顏色,而不影響文字本身。

用紅色文字建立黑色底線

來實現您想要的輸出,實現以下CSS 屬性:

將此CSS 應用於HTML元素,如下所示:

因此,您的文字將保持紅色,而下劃線將變為黑色,無需使用額外的包裝即可獲得所需的效果。

以上是如何使用 CSS3 創建帶有紅色文字的黑色底線?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板