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

Schaefer

Probably can't use text-decoration. But you should be able to fudge it by overlaying and positioning say a 1px height div with a border and animate the width of the div. – Quahog

Have you noticed that you can't actually tell the browser what you want the animation to look like? Neither does the browser know. So it doesn't try. – Na

Answer 1

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>

Conjugation

Provided you aren't concerned about some older browser support (due to animations and pseudo element) this would be the way to go. Nice solution LGSon – Medical

Just a warning: this won't work if the text breaks on to another line – Kant

@Kant -- So true, thanks, updated my answer with a note. – Conjugation

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>

Pediform

It works on Firefox and Chromium with some experimental flag. – Pediform

Answer 3

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>

Chromium

I couldn't get it to work with multi-line texts; did I miss something? codepen.io/TTvanWillegen/pen/xxzJzWN – Houk

@TobyvWillegen It is because of display: grid;. – Puklich

Answer 4

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.

Xanthic

This is amazing, but I do not think that this is answer of this question. I know you can use strike through ( straight line image ) image instead of scribble image but... – Enyedy

Answer 5

I've been able to find a way around it that also work for multiple lines, I mainly got this info from Kevin Powell's code pen:https://codepen.io/kevinpowell/pen/MWYwgOz. Here's my solution

.fancy-link {
  text-decoration: none;
  background-image: linear-gradient(red, red);
  background-repeat: no-repeat;
  background-position: center left;
  background-size: 0% 1px;
  transition: background-size 500ms ease-in-out;

  /* extra styling   */
/*   font-weight: var(--fw-bold); */
}

.fancy-link:hover {
  background-size: 100% 1px;
  color: inherit;
}

<div class="content">
  <p> <a class="fancy-link" href="#">sit amet consectetur adipisicing elit. Impedit repudiandae assumenda beatae Impedit repudiandae assumenda beatae Impedit repudiandae assumenda beatae Impedit repudiandae assumenda beatae quo iure quaerat voluptate placeat. A eius cum, rem aspernatur ipsa illum. Commodi ullam cupiditate aliquid ducimus consequatur.</a></p>
</div>

Also, for accessibility issues, you can add

.fancy-link:hover{
  /*...former code*/
  text-decoration: line-through;
  text-decoration-color:transparent;
}

Note: the "fancy-link" class isn't on the paragraph tag but on the anchor tag.

Magnificent

Answer 6

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

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

Razorback

I prefer to reference Mozilla's documentation than W3, so I'll drop this link here as well: developer.mozilla.org/en/docs/Web/CSS/text-decoration – Medical