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

无法用text-decoration-line实现两侧延伸删除线，需用position: relative容器配合::after伪元素，设width: 120%、left: -10%、top: 50%、transform: translateY(-50%)模拟贯穿式删除线。text-decoration-line 无法实现两侧连贯删除线单行文本两侧加“贯穿式”删除线（即从左到右完整横穿，且两端延伸出文字边界），text-decoration-line: line-through 做不到——它只作用于文字内容区域，不会超出字宽，更不会延伸到左右空白处。真正可行的路是用伪元素模拟：给容器加 ::before 或 ::after，定位成横线，再手动控制长度和位置。用 ::after + absolute 实现左右延伸的删除线核心思路是把删除线做成一个绝对定位的 ::after 元素，宽度设为足够长（比如 120%），再用 left: -10% 把它往左拉出文字区，就能覆盖左侧空白；右侧自然溢出。常见错误现象：width: 100% + left: 0 看起来对齐，但实际线只在文字盒内，碰不到左右间隙；或者忘了设 content: ""，伪元素不渲染。立即学习“前端免费学习笔记（深入）”；实操建议：position: relative 必须加在文本容器上（如 <span> 或 <p>），否则 ::after 会相对于 body 定位::after 要设 content: ""、display: block、height: 1px、background: currentColor用 top: 50% + transform: translateY(-50%) 居中对齐基线，比猜 top: 0.3em 更稳宽度推荐 width: 120%，left: -10%，兼容不同字体下沉程度示例 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%);}line-height 和 font-size 影响删除线垂直位置伪元素的 top: 50% 是相对于容器高度算的，而容器高度又受 line-height 和 font-size 共同影响。如果文本用了 line-height: 1.2，容器高度就不是字体大小本身，会导致删除线偏高或偏低。 Mokker AI AI产品图添加背景