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