Animate strikethrough for anchor tag without losing focus

April 18, 2024

I’m trying to create an animation where line-through will go from left to right on hover, But I’m not able to achieve it. As there are some limitations with the text-decoration property.

So I tried with pseudo-elements like ::after& gradient but the problem is my anchor tag stacks above and if I use z-index to manage that, I lose the focus from the anchor tag and I’m not able to click on the anchor tag

And for the pseudo-elements, it’s not working with multiple lines.

Attempt using text-decoration properties:

span {
  text-decoration: line-through !important;
  text-decoration-color: transparent !important;
  transition: text-decoration-color 1s;
}

span:hover {
  text-decoration: line-through !important;
  text-decoration-color: red !important;
}

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

Attempt using a gradient:

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.9em;
}

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

Attempt using pseudo-elements:

.strikethrough-animation {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.strikethrough-animation::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px; /* Adjust thickness of the line */
  background-color: black; /* Adjust color of the line */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s ease; /* Adjust duration and timing function */
}

.strikethrough-animation:hover::after {
  transform: scaleX(1);
}

<span>
  <a class="strikethrough-animation"  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>

>Solution :

Turn it around – put the span into the a, then you can use z-index to get the text behind the background of the link. And no background clipping any more, but simply a gradient that is transparent in all but the red part.

a {
  position: relative;
  z-index: 1;
  background: 
    linear-gradient(red 0 0) no-repeat 
    0 60% / var(--s,0%) .1em,
    #0000;
  color: #000;
  transition: background-size .4s ease;
  font-size: 1.9em;
}
a:hover {
  --s: 100%;
}
a span { position: relative; z-index:-1; }

<a href="#"><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.</span></a>