Animated CSS strikethrough text decoration

Question

I'm referring to this answer. Obviously the red line is behind the text due to the use of background. How to achieve the same effect (with multiline support) with the red line in front of the text?

span {
  --thickness: .1em;
  --strike: 0;
  background: linear-gradient(90deg, transparent, red 0) no-repeat 
              right center / calc(var(--strike) * 100%) var(--thickness);
  transition: background-size .4s ease;
  font-size: 1.5em;
}

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

<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>

Answer 1

You can color the text using background as well by considering background-clip

span {
  background: 
    linear-gradient(red 0 0) no-repeat 
    left / var(--s,0%) .1em,
    #000;
  -webkit-background-clip: border-box, text;
          background-clip: border-box, text;
  color: #0000;
  transition: background-size .4s ease;
  font-size: 1.5em;
}

span:hover {
  --s: 100%;
}

<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>