如何使用 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>
廣告
資料結構
網路
RDBMS
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP