如何为整个Div添加贯穿线而非仅文本内的删除线

text-decoration: line-through只能跟随文本内容的宽度，没法延伸到整个父容器，你可以用以下两种方法实现需求：

方法一：CSS伪元素（最灵活可控） #

通过给父容器添加伪元素生成贯穿整个容器的横线，再用文本的背景色盖住文本区域的横线，形成类似删除线的效果：

<div class="full-strike">
  <span class="strike-text">需要贯穿整个div的文本内容</span>
</div>

.full-strike {
  position: relative;
  width: 100%; /* 可根据需求设置固定宽度 */
  background-color: #ffffff; /* 和页面背景色保持一致 */
}

/* 生成贯穿整个div的横线 */
.full-strike::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background-color: #333; /* 自定义删除线颜色 */
  transform: translateY(-50%); /* 让横线垂直居中 */
}

/* 文本区域用背景色盖住横线，避免文字和线重叠 */
.strike-text {
  position: relative;
  background-color: inherit;
  padding: 0 8px; /* 给文本左右留空隙，提升可读性 */
}

方法二：线性渐变背景 #

利用背景渐变生成横线，同样通过文本的背景色覆盖中间区域：

.full-strike {
  background-image: linear-gradient(to right, #333 100%, transparent 0);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 1px;
  width: 100%;
}

.strike-text {
  background-color: #ffffff;
  padding: 0 8px;
  display: inline-block;
}

这两种方法都能让横线延伸至整个div的宽度，同时保证文本区域显示正常，你可以根据实际布局需求调整颜色、线宽和内边距。

内容的提问来源于stack exchange，提问作者TheBeardedOne234