如何使用 CSS text-decoration-color 更改链接下划线颜色

cssweb developmentfront end technology更新于 2024/5/16 11:56:17

CSS text-decoration-color 用于更改 text-decoration-line 的颜色。

语法

CSS text-decoration-color 属性的语法如下 −

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

示例

以下示例说明了 CSS text-decoration-color 属性。

<!DOCTYPE html>
<html>
   <head>
      <style>
         p {
            background-color: gray;
            margin: 4%;
            font-size: 1.2em;
            text-decoration: underline;
            text-decoration-color: violet;
         }
      </style>
   </head>
   <body>
      <p>
         Y aserejé-ja-dejé De jebe tu de jebere seibiunouva majavi an de bugui an de güididípi
      </p>
   </body>
</html>

这将给出以下输出

示例

<!DOCTYPE html>
<html>
   <head>
      <style>
         div, a {
            margin: 4%;
            font-size: 1.2em;
            text-decoration: underline;
            text-decoration-color: green;
         }
      </style>
   </head>
   <body>
      <div>
         Underlined demo text.
         <a href=#>Hyperlink here!</a>
      </div>
   </body>
</html>

这将给出以下输出