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

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>

It's very elegant, IMO, to use linear-gradient as background, and paint line which is the same color as the text (currentColor).

This solution is very flexible, opens up the door to many interesting effects and is also much less code than a pseudo-element solution.

PS: It also supports multi-line texts

From my CodePen:

span {
  --thickness: .1em;
  --strike: 0;
  
  background: linear-gradient(90deg, transparent, currentColor 0) no-repeat 
              right center / calc(var(--strike) * 100%) var(--thickness);

  transition: background-size .4s ease;
  font: 25px Arial;
  padding: 0 .2em;
}

span:hover {
  --strike: 1; /* "1" means "true" (show the strike line) */
  background-position-x: left;
}
<span contenteditable spellcheck='false'>
  Strike-through animation (hover)
 </span>

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.

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>

Tags:

Html

Css

Css Animations

Recent Posts