Animated CSS strikethrough text decoration with multiple text colors

Question

I'm referring to this answer. What if there is more than one color needed to be strikethrough?

span {
  background: 
    linear-gradient(red 0 0) no-repeat 
    0 60% / 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>
  <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>

Answer 1

As after discussion in the comment box, here is the solution.

Just use position:relative on the text and put z-index:-999 so your text will be behind the red line(strikethrough).

Working example :

span {
  background: 
    linear-gradient(to bottom, red 0 0) no-repeat 
    0 60% / 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%;  
}

a{
  position:relative;
  z-index:-999;
}

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

Hope it helps you.

Answer 2

This snippet uses currentcolor to color the background and text-fill-color to set the transparency and applies the background to spans children as well.

However, this is not a perfect answer because it seems that text-decoration-color does not pick up currentcolor if the text has been filled with another color so underline is lost. It’s reinstated here by being given a definite color.

span {
  font-size: 1.5em;
}
span, span *{
  text-decoration-color: purple;
  /* text-decoration-color: currentcolor;
  that use of currentcolor doesn’t work
     at least on IOS 16… Safari for me */
  background: 
    linear-gradient(red 0 0) no-repeat 
    0 60% / var(--s,0%) .1em,
    currentcolor;
  -webkit-background-clip: border-box, text;
          background-clip: border-box, text;
  -webkit-text-fill-color: #0000;
  text-fill-color: #0000;
  transition: background-size .4s ease;    
}

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

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

Answer 3

Update your code like below:

span.strike {
  background: 
    linear-gradient(red 0 0) no-repeat 
    0 60% / var(--s, 0%) .2em;
  transition: background-size .4s ease;
  font-size: 1.5em;
  isolation: isolate; /* create a stacking context */
  pointer-events: none; /* disable mouse events */
}
span * {
  pointer-events: initial; /* re-enable mouse event on child elements */
  position: relative;
  z-index: -1; /* put link behind strikethrough */
}

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

<span class="strike">
  <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> <span>At vero eos et accusam et justo duo dolores et ea rebum.</span>
</span>

Answer 4

In this solution, I've doubled the text so the colored link can be below the span and the clickable clone is rendered transparently atop it. Therefore, you see the colored link below the colored strikethrough line but you can still click it.

div {
  font: bold 2em serif;
  width:98%;
}

div.over {
  position: absolute;
}

div.over span {
  background: 
    linear-gradient(90deg, red, yellow, green, blue, magenta) no-repeat 
    0 60% / var(--s,0%) .1em,
    transparent;
  transition: background-size .4s ease;
}

div.over span:hover {
  --s: 100%;
}

div.under {
  position: relative;
  z-index: -1;
}

div.over :is(span, span *) {
  color:transparent;
}

<div class="over"><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></div>
<div class="under"><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></div>

This is made possible with containing <div> elements using varying z-index values. This lets us put elements above or below others. Everything defaults to zero, so I've put the colored link below zero and left the clickable link at the default depth. z-index requires position:relative (keep things where they are) or position:absolute (make the element independent of its parents, render things around it as if it does not exist). It shouldn't matter that I chose the "over" copy to be absolute and the "under" copy to be relative, but the first must be absolute (to not affect the flow) and the second must be relative (to keep the flow correct).

There's a little oddity in which the absolute <div> doesn't wrap the same way, but I solved that by forcing them both to width:98%. A static value would be more reliable.

I initially misread your request as wanting a rainbow of colors for the strike-through effect, which is as simple as changing the parameters in the linear-gradient() function. It's pretty, so I kept that. You can revert it by going back to linear-gradient(red 0 0).

You'll also notice that I removed a bunch of unnecessary CSS cues (color and background-clip). If that breaks things, put them back. Finally, I increased the font to be larger and bolder so you can more clearly see what's on top of what.

Answer 5

Not many changes are needed. Just replace the background's #000 fallback color with the currentcolor and add a -webkit-text-fill-color entry in place of color.

While color changes all of the text, -webkit-text-fill-color affects only the parts that overlap what was clipped with background-clip (the strikethrough line). I prefer transparent over #0000, but they are technically identical (#0000 is black but with zero opacity, which is transparent, just like #fff0).

span, span * {
  background: 
    linear-gradient(red 0 0) no-repeat 
    0 60% / var(--s,0%) .1em,
    currentcolor;
  background-clip: border-box, text;
  -webkit-text-fill-color: transparent;
  transition: background-size .4s ease;    
  font: bold 1.5rem serif;
}

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

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

I've made the text bold so you can more clearly see that the strikethrough line is rendered atop the text. I changed the units to ensure it's not as relative; span, span * { font-size:1.5em } would mean children are half again as big as the container. 1.5rem is instead relative to the document root.

(You may notice that I've removed -webkit-background-clip and I don't include text-fill-color or -moz-text-fill-color. That's because background-clip is now fully supported without a vendor prefix and text-fill-color isn't (yet?) a proposal; it's supported only with the -webkit vendor prefix, even on Firefox.)