使用 CSS 进行文本装饰

cssweb developmentfront end technology更新于 2025/1/21 0:12:17

CSS 的 text-decoration 属性用于对选定元素的文本进行装饰。我们可以添加划线、上划线、下划线等值。它是 text-decoration-line、text-decoration-color 和 text-decoration-style 的简写。

语法

text-decoration 属性的语法如下 −

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

示例

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

<!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(2)::before {
   content: " We will reach the destination ";
   background-color: lightgreen;
   text-decoration: overline blue;
   font-size: 1.2em;
}
</style>
</head>
<body>
<p>I'm not the only traveller</p>
<p>
before night.
</p>
</body>
</html>

输出

这将给出以下输出 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
span {
   background: rgb(204,22,50);
   text-decoration: blue line-through;
   font-style: italic;
   color: white;
}
p {
   text-decoration: underline;
}
</style>
</head>
<body>
<h2>Department Details</h2>
<p>
The employees of Department Marketing, Operations, Finance,
<span>IT</span>
are requested to email their original documents.<span> Delay in submission will lead to delayed verification.</span>
</p>
</body>
</html>