html和CSS给文字添加删除线的三种方法

引言

在网页设计中，文字排版不可或缺。有时需要表达一些特殊的含义，比如正在删除或者修改的文字，这时候就需要为文字添加删除线。

方法一：使用text-decoration属性

最常见的方法就是使用CSS的text-decoration属性。该属性有三个值可选：none（没有线），underline（下划线），line-through（删除线）。我们就可以将text-decoration设置为line-through来添加删除线。

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

可以在HTML中添加一个class名为text--deleted的元素，然后在CSS中将该类的text-decoration属性设置为line-through。

text-decoration属性的其他可能值：

none：没有装饰

underline：下划线

overline：上划线

line-through：删除线

blink：闪烁

方法二：使用伪元素

除了text-decoration属性，我们还可以使用伪元素来为文字添加删除线。具体步骤如下：

将需要添加删除线的元素的position属性设置为relative

为需要添加删除线的元素添加一个伪元素

设置伪元素的内容为空，将伪元素的宽度设为100%，高度设为1px

将伪元素的背景颜色设置为想要的删除线颜色，这里我们将其设置为红色

将伪元素的位置设置在文字下方，即将top属性设置为100%

代码如下：

  .text--deleted::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: red;
    position: absolute;
    top: 100%;
  }

可以在HTML中添加一个class名为text--deleted的元素，然后在CSS中为其添加一个伪元素，并将该伪元素设置为红色的100%宽度、1px高度的块级元素。

方法三：使用JavaScript

如果需要动态地添加删除线，我们也可以使用JavaScript来实现。具体步骤如下：

获取需要添加删除线的元素

创建一个新的元素，设置其宽度为原始元素的宽度，高度为1px，颜色为想要的删除线颜色

将新元素插入到原始元素之后

代码如下：

  const textDeleted = document.querySelector('.text-deleted');
  const line = document.createElement('div');
  line.style.width = textDeleted.offsetWidth + 'px';
  line.style.height = '1px';
  line.style.backgroundColor = 'red';
  textDeleted.insertAdjacentElement('afterend', line);

可以在HTML中添加一个class名为text-deleted的元素，然后在JavaScript中为其创建一个新的元素，并将其插入到文本之后。

结论

以上三种方法均可用于添加删除线，但在大多数情况下，使用text-decoration属性即可满足需求。如果需要动态地添加删除线，则可以使用JavaScript来实现。如果需要更多的控制，比如删除线的颜色、样式等，那么使用伪元素则是一种比较好的选择。总之，在Web开发中，为文字添加删除线是一种非常基础和常用的技术。