Is it possible to animate a CSS line-through text-decoration?

Issue

I am trying to animate with CSS the a line through on a bit of text, but it’s not actually animating, just going from hidden to displayed. Can anyone advise if what I’m trying is actually possible? If not, is there another way to achieve this?
HTML:

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

CSS:

@keyframes strike{
                from{text-decoration: none;}
                to{text-decoration: line-through;}
            }
 .strike{  
    -webkit-animation-name: strike; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    animation-name: strike;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards; 
    }

Solution

You can use a pseudo like this

Note (thanks to Phlame), this left-to-right animation won’t work if the line to strike breaks in to a second line. For that one need to use yet another pseudo element and some script to position the two properly. Or use some other animation effect, e.g. like the one suggested in Oriol’s answer.

@keyframes strike{
  0%   { width : 0; }
  100% { width: 100%; }
}
.strike {
  position: relative;
}
.strike::after {
  content: ' ';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: black;
  animation-name: strike;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; 
}
<div>
    The text in the span <span class="strike">is what I want to strike out</span>.
</div>

Answered By – Asons

Answer Checked By – Marie Seifert (AngularFixing Admin)

Leave a Reply

Your email address will not be published.