在 CSS 中设置文本装饰颜色

要设置文本装饰的颜色，请使用 text-decoration-color 属性。要将此颜色置顶线、下划线、删除线等，请使用 text-decoration 属性。让我们看看如何设置文本装饰的颜色

给文本装饰置顶线着色

文本以置顶线装饰，然后使用 text-decoration-color 属性设置颜色 −

.demo {
   text-decoration: overline;
   text-decoration-color: yellow;
}

实例

以下是示例 −

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      .demo {
         text-decoration: overline;
         text-decoration-color: yellow;
      }
   </style>
</head>
<body>
   <h1>Examination Details</h1>
   <p class="demo">Exam on 20th December.</p>
   <p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

给文本装饰下划线着色

文本以下划线装饰，然后使用 text-decoration-color 属性设置颜色 −

.demo {
   text-decoration: underline;
   text-decoration-color: orange;
}

实例

现在让我们看看另一个示例 −

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      .demo {
         text-decoration: underline;
         text-decoration-color: orange;
      }
   </style>
</head>
<body>
   <h1>Details</h1>
   <p class="demo">Examination Center near ABC College.</p>
   <p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

给文本装饰删除线着色

文本以删除线装饰，然后使用 text-decoration-color 属性设置颜色。删除线会在文本中显示一条线

.demo {
   text-decoration: overline;
   text-decoration-color: blue;
}

实例

以下是示例 −

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      .demo {
         text-decoration: line-through;
         text-decoration-color: blue;
      }
   </style>
</head>
<body>
   <h1>Demo Heading</h1>
   <p class="demo">This is a demo text.</p>
   <p class="demo2">This is another demo text.</p>
</body>
</html>

更新于：2023 年 12 月 26 日

155 次浏览

开启你的 职业

完成课程获得认证

开始
广告