如何使用 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.com/java">Java Tutorial for free</a><br/>
   Access our <a href="https://tutorialspoint.com/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.com/java">Java Tutorial for free</a><br/>
      Access our <a href="https://tutorialspoint.com/python">Python Tutorial for free</a>
   </p>
</body>
</html>

更新于:16-11-2023

884 次浏览

开启你的 职业

完成课程以获得认证

开始学习
广告