css3是一种用于网页设计和排版的样式表语言，它具有丰富的特性和强大的功能。其中，删除线（strikethrough）是一种常见的效果，通常用于表示删除的文字或内容。本文将介绍如何使用css3写删除线。
- 使用text-decoration属性
text-decoration属性用于设置文本修饰效果，其中包括删除线效果。通过设置它的值为line-through，即可实现删除线效果。例如下面的CSS代码：
.delete {
text-decoration: line-through;
}这个样式将应用到类名为delete的元素中，使其所有文本内容都带有删除线效果。
- 自定义删除线样式
除了使用text-decoration属性来设置删除线效果外，CSS3还提供了多种方式来自定义删除线样式，使其更加美观和个性化。
2.1 设置删除线颜色
立即学习“前端免费学习笔记（深入）”；
通过text-decoration-color属性来设置删除线的颜色，例如：
.delete {
text-decoration: line-through;
text-decoration-color: red;
}这个样式将应用到类名为delete的元素中，使其所有文本内容的删除线颜色为红色。
2.2 设置删除线位置
通过text-decoration-position属性来设置删除线的位置。默认情况下，删除线在文本的中央位置，可以使用该属性来设置删除线的上下偏移量。
.delete {
text-decoration: line-through;
text-decoration-position: under;
}这个样式将应用到类名为delete的元素中，使其所有文本内容的删除线位置在文本下方。
2.3 设置删除线宽度
通过text-decoration-thickness属性来设置删除线的宽度。默认情况下，删除线的宽度是1px。可以通过该属性来改变删除线的宽度。
.delete {
text-decoration: line-through;
text-decoration-thickness: 2px;
}这个样式将应用到类名为delete的元素中，使其所有文本内容的删除线宽度为2px。
- 使用伪元素实现删除线
除了使用text-decoration属性来设置删除线效果外，CSS3还可以使用伪元素来实现删除线效果。通过设置伪元素的content属性为空，同时设置其宽度、颜色、位置等属性，即可实现删除线效果。例如下面的CSS代码：
.delete::after {
content: "";
display: block;
width: 100%;
height: 1px;
background-color: black;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}这个样式将应用到类名为delete的元素的伪元素中，使其在文本下方显示一条宽度为1px、颜色为黑色的删除线。
总结
通过text-decoration属性、自定义删除线样式以及伪元素等方式，我们可以很方便地实现删除线效果。需要注意的是，在一些特殊场景中，如阅读体验的考虑或者SEO优化等，删除线并不适用。在使用时需要结合具体情况进行考虑。
