如何实现支持多文本颜色的CSS动态删除线文本装饰？

现有基于渐变背景实现的动态删除线效果仅支持单一红色，如何调整实现，让文本可以添加多种颜色的动态删除线？

核心思路与调整步骤 #

• 利用CSS背景的多图层特性，叠加多个线性渐变来实现多条不同颜色的删除线
• 为每条删除线定义独立的CSS变量，控制各自的动画状态
• 同步或独立触发各删除线的宽度变化，实现动态效果

调整后的代码实现 #

CSS 代码

span {
  background: 
    /* 第一条删除线：红色，垂直位置45% */
    linear-gradient(red 0 0) no-repeat 
    0 45% / var(--s1,0%) .1em,
    /* 第二条删除线：蓝色，垂直位置75% */
    linear-gradient(blue 0 0) no-repeat 
    0 75% / var(--s2,0%) .1em,
    #000;
  -webkit-background-clip: border-box, border-box, text;
          background-clip: border-box, border-box, text;
  color: #0000;
  transition: background-size .4s ease;
  font-size: 1.5em;
}

span:hover {
  --s1: 100%;
  --s2: 100%;
}

HTML 代码

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

扩展说明 #

• 如需添加更多颜色的删除线，只需在background属性中新增对应的线性渐变图层，并定义新的CSS变量（如--s3）控制其宽度
• 可通过调整渐变的垂直位置（0 X%中的X值）改变删除线的上下位置
• 若要实现不同步的动画，可为每个变量设置独立的过渡效果，例如：transition: --s1 .4s ease, --s2 .6s ease .2s;

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