CSS如何通过伪元素让单行文本的两侧有连贯的删除线-css教程-PHP中文网

无法用text-decoration-line实现两侧延伸删除线，需用position: relative容器配合::after伪元素，设width: 120%、left: -10%、top: 50%、transform: translatey(-50%)模拟贯穿式删除线。

css如何通过伪元素让单行文本的两侧有连贯的删除线

text-decoration-line 无法实现两侧连贯删除线

单行文本两侧加“贯穿式”删除线（即从左到右完整横穿，且两端延伸出文字边界），text-decoration-line: line-through 做不到——它只作用于文字内容区域，不会超出字宽，更不会延伸到左右空白处。

真正可行的路是用伪元素模拟：给容器加 ::before 或 ::after，定位成横线，再手动控制长度和位置。

用 ::after + absolute 实现左右延伸的删除线

核心思路是把删除线做成一个绝对定位的 ::after 元素，宽度设为足够长（比如 120%），再用 left: -10% 把它往左拉出文字区，就能覆盖左侧空白；右侧自然溢出。

常见错误现象：width: 100% + left: 0 看起来对齐，但实际线只在文字盒内，碰不到左右间隙；或者忘了设 content: ""，伪元素不渲染。

实操建议：

position: relative 必须加在文本容器上（如 <span></span> 或 <p></p>），否则 ::after 会相对于 body 定位
::after 要设 content: ""、display: block、height: 1px、background: currentColor
用 top: 50% + transform: translateY(-50%) 居中对齐基线，比猜 top: 0.3em 更稳
宽度推荐 width: 120%，left: -10%，兼容不同字体下沉程度

示例 CSS：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.strikethrough-extended {
  position: relative;
  display: inline-block;
}
.strikethrough-extended::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -10%;
  width: 120%;
  height: 1px;
  background: currentColor;
  transform: translateY(-50%);
}