Turn hover animation on or off

Question

I am trying to make strikethrough animation as an effect here:

The line of impact appears from left to right and disappears from left to right .

@keyframes strike { 0% { width: 0; } 50% { width: 100%; } 100% { width: 0; } } .strike { position: relative; } .strike:hover:after { content: ' '; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: black; animation-name: strike; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: 1; animation-fill-mode: fill; animation-direction: normal; } 

 <div> The text in the span <span class="strike">is what I want to strike out</span>. </div> 

Is there a way to achieve this with CSS only?

Answer 1

You can use transform and start-transform in the keyframe animation to make it punched from left to left and disappear from left to right .
The point is to scale the pseudo-element on the X axis from 0 to 1 with the start of the transformation on the left, then back to 0 with the start of the conversion on the right (see the last example of the answer for the hover effect).

And here is an example with your markup:

 @keyframes strike{ 0% { transform-origin: 0% 50%;transform:scaleX(0); } 50% { transform-origin: 0% 50%;transform:scaleX(1); } 50.01% { transform-origin:100% 50%;transform:scaleX(1); } 100% { transform-origin:100% 50%;transform:scaleX(0); } } .strike { position: relative; } .strike:hover:after { content: ' '; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: black; animation: strike .75s ease-in-out forwards; } 

 <div> The text in the span <span class="strike">is what I want to strike out</span>. </div> 

Answer 2

Here is an example using transition where it moves the cursor left / right.

 .strike { position: relative; } .strike::after { content: ' '; position: absolute; top: 50%; left: 0; right: 100%; height: 1px; background: black; } .strike:hover::after { right: 0; left: 100%; transition: right .5s .0s, left .5s .5s; } 

 <div> The text in the span <span class="strike">is what I want to strike out</span>. </div>