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

Question

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 tr

Answer 1

According to W3Schools, the text-decoration property is not animatable.

However, if you use jQuery, you can. (See here)

Answer 2

It depends on how you want to animate it.

Since text-decoration-color is animatable, you can animate it from transparent to auto.

But this property is not widely supported yet.

@keyframes strike {
  from { text-decoration-color: transparent; }
  to { text-decoration-color: auto; }
}
.strike {  
  text-decoration: line-through;
  animation: strike 4s linear;
}

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

Answer 3

Here's a variation on the accepted answer, using an image to provide an animated "scribble" strike-through.

html {
  font-family: Helvetica;
  font-size: 24px;
}
.strike { position:relative; }
.strike::after {
  content:' ';
  position:absolute;
  top:50%; left:-3%;
  width:0; height:10px;
  opacity:80%;
  transform:translateY(-50%);
  background:repeat-x url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAKAQMAAAByjsdvAAAABlBMVEUAAADdMzNrjRuKAAAAAXRSTlMAQObYZgAAADdJREFUCNdj+MMABP8ZGCQY/h9g+MHw/AHzDwbGD+w/GBhq6h8wMNj/b2BgkP8HVMMPUsn+gQEAsTkQNRVnI4cAAAAASUVORK5CYII=);
  animation: strike 2s linear .3s 1 forwards;
}
@keyframes strike { to { width: 106%; } }

This thing and <span class="strike">this thing and</span> this thing.

Answer 4

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>