如何使用 text-decoration-color CSS 改變連結下劃線顏色?


CSS text-decoration-color 用於更改連結顏色。使用 text-decoration 屬性設定下劃線。若要更改連結下劃線顏色,則使用相同的 text-decoration-color 屬性。

語法

CSS text-decoration-color 屬性的語法如下 −

Selector {
   text-decoration-color: /*value*/
}

設定連結

為了在網頁上設定連結,我們使用了具有 href 屬性的 <a> 元素。在 href 屬性中新增連結 −

<p>
   Access our <a href="https://tutorialspoint.tw/java">Java Tutorial for free</a><br/>
   Access our <a href="https://tutorialspoint.tw/python">Python Tutorial for free</a> 
</p>

樣式連結

這裡使用文字裝飾屬性對連結設定樣式 −

<style>
	a {
		text-decoration: underline;
		text-decoration-color: orange;
	}
</style>

下劃線和設定連結下劃線顏色

上面,我們使用了以下兩個屬性為連結加下劃線並更改顏色 −

text-decoration: underline;
text-decoration-color: orange;

示例

讓我們看一個示例,使用 CSS text-decoration-color 屬性更改連結下劃線顏色 −

<!DOCTYPE html>
<html>
<head>
   <style>
      a {
         text-decoration: underline;
         text-decoration-color: orange;
      }
   </style>
</head>
<body>
   <h1>Demo Heading</h1>
   <p>
      Access our <a href="https://tutorialspoint.tw/java">Java Tutorial for free</a><br/>
      Access our <a href="https://tutorialspoint.tw/python">Python Tutorial for free</a>
   </p>
</body>
</html>

更新於:16-11-2023

884 次瀏覽

開啟你的 職業

完成課程以獲得認證

開始學習
廣告
© . All rights reserved.