CSS 增加删除线到选中的复选框

在本文中，我们将介绍如何使用CSS添加删除线到选中的复选框。删除线通常用于表示某些内容已被删除或不再有效。我们将使用CSS的伪类选择器和伪元素来实现这一效果。

阅读更多：CSS 教程

使用:checked选择器和::after伪元素

要添加删除线到选中的复选框，我们需要使用:checked伪类选择器和::after伪元素。:checked伪类选择器选择已被选中的复选框，而::after伪元素则允许我们添加额外的内容到选中的复选框后面。

下面是示例代码：

input[type="checkbox"]:checked::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #000;
  position: absolute;
  top: 50%;
  left: 0;
}

在这个例子中，我们选择所有类型为”checkbox”且已被选中的复选框。使用::after伪元素，我们添加了一个空的内容并设置了宽度、高度和背景颜色来实现删除线效果。使用绝对定位，我们将删除线置于复选框的中间位置。

示例

让我们通过一个示例来演示如何使用CSS添加删除线到选中的复选框。

<!DOCTYPE html>
<html>
<head>
  <title>CSS Add strikethrough to checked checkbox</title>
  <style>
    input[type="checkbox"]:checked::after {
      content: "";
      display: block;
      width: 100%;
      height: 1px;
      background-color: #000;
      position: absolute;
      top: 50%;
      left: 0;
    }
  </style>
</head>
<body>
  <label for="checkbox">选中此复选框</label>
  <input type="checkbox" name="checkbox" id="checkbox">
</body>
</html>

在上面的示例中，我们创建了一个复选框并添加了一个相关的标签。当我们选中复选框时，CSS样式将会生效并在标签后面添加删除线。