如何实现前置红线的多行CSS动态删除线效果？

原代码通过background属性实现的红色删除线位于文字后方，现需实现相同的从右到左展开的动态过渡效果，同时支持多行文本，且红线显示在文字前方。

解决方案代码 #

CSS 代码 #

span {
  --thickness: .1em;
  --strike: 0;
  position: relative; /* 为伪元素定位提供基准 */
  font-size: 1.5em;
}

span::before {
  content: '';
  position: absolute;
  inset: 0; /* 填充整个父元素区域 */
  background: linear-gradient(90deg, transparent, red 0) no-repeat 
              right center / calc(var(--strike) * 100%) var(--thickness);
  transition: background-size .4s ease;
  z-index: 1; /* 将伪元素置于文字前方 */
}

span:hover {
  --strike: 1;
  background-position-x: left;
}

HTML 代码 #

<span>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</span>

实现逻辑说明 #

• 借助::before伪元素创建独立图层，通过z-index: 1将其置于文字前方，直接解决红线在文字后方的问题。
• 沿用原方案的CSS变量--strike控制背景宽度，结合transition实现鼠标悬停时从右至左的平滑展开动画。
• 伪元素通过inset: 0完全填充父元素<span>区域，<span>默认的行内特性会自动适配多行文本的每行布局，无需额外处理换行问题。

内容的提问来源于stack exchange，提问作者Three Year Old