如何在 CSS 中创建删除线

在文本中添加删除线是一种常见的视觉效果，可以用来表示已经被删除或不再有效的内容。在 CSS 中，我们可以使用 text-decoration 属性来创建删除线。

text-decoration 属性

text-decoration 属性可用于添加或删除文本装饰效果，例如下划线、删除线、空格线等。

要创建删除线，我们可以将该属性设置为 line-through。

.text {
  text-decoration: line-through;
}

上面的代码将给 .text 类添加删除线效果。

更多用法

除了 line-through，text-decoration 属性还支持以下值：

• none：不添加文本装饰效果。
• underline：添加下划线。
• overline：添加上划线。
• line-through：添加删除线。
• blink：添加闪烁效果（已被废弃）。

我们还可以将多个值使用空格分隔，来同时添加多个装饰效果。

.text {
  text-decoration: line-through underline;
}

上面的代码将给 .text 类同时添加删除线和下划线效果。

自定义样式

如果默认的删除线样式不满足我们的需求，我们可以使用 text-decoration-style 属性来自定义删除线的样式。

.text {
  text-decoration: line-through;
  text-decoration-style: double;
  text-decoration-color: red;
}

上面的代码将给 .text 类添加双重的、红色的删除线效果。

结语

以上是在 CSS 中创建删除线的方法。 text-decoration 属性提供了多种文本装饰效果，而 text-decoration-style 和 text-decoration-color 可以用于自定义删除线的样式。