无法用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，容器高度就不是字体大小本身，会导致删除线偏高或偏低。
使用场景：当文本嵌套在按钮、标签、表格单元格里，且父级设置了非默认 line-height 时，必须重新校准 top 或改用 bottom: 0.2em 这类基于 em 的偏移。
参数差异：
- 用
top: 50%+transform: translateY(-50%)最通用，但依赖容器有明确高度 - 用
bottom: 0.25em更贴近传统删除线视觉位置，但需根据字体微调（如思源黑体可能要0.2em，苹方要0.3em） - 避免用固定像素值（如
top: 8px），换字体或字号就错位
响应式下宽度延伸比例需要调整
在小屏幕或缩放率变化时，width: 120% 可能不够——文字变窄后，左右留白相对变大，线就盖不住了；反之大屏下又可能过长，压到旁边元素。
性能 / 兼容性影响：纯 CSS 无运行时开销，所有现代浏览器都支持；但要注意 inline-block 容器在 IE 中可能触发 hasLayout 问题，若需兼容 IE11，加 zoom: 1。
实操建议：
- 移动端可改用
width: calc(100% + 1rem)，用固定余量替代百分比，更可控 - 如果文本左右有 padding，记得把
left往左多拉一点（如left: calc(-1rem - 10%)） - 不要给伪元素设
pointer-events: none——虽然不影响点击，但万一父元素有 hover 效果，去掉它反而容易误触
真正麻烦的是中英文混排时，字符宽度不均导致“延伸感”不一致；这时候只能接受视觉上的妥协，或者切分文本、分别加伪元素——但那就不是单行方案了。
