Better CSS strikethroughs

Too long, didn’t read: Use text-underline-offset and @supports to progressively enhance finer control over your strikethroughs – see the code.

Text decoration has been around since CSS Level 1, and it works.

More recently the introduction of text-decoration- modifying properties have allowed a greater control over the line, but there are still limitations…

The problem ¶

I ran into this while trying to get a more aesthetic position for the strikethrough on my journal post about redesigning this site:

The default position was too high.

You might ask why this matters, but these fine details are what stand in the way of something looking truly polished (not perfect mind you), so I set about fixing it!

I knew that there was an offset property for text decoration, so I tried text-decoration-offset only to find out that only underlines could have an offset… go figure.

Frustrated – but not beaten – I considered that text-decoration: line-through is basically an underline, but positioned in the middle. Could I fake a strikethrough using an offset underline?

del {
  text-decoration: underline;
  /* -0.33em was the value (notice relative units to ensure that it scales as the
     parent `font-size` scales) needed for Clone Rounded, but for other webfonts this
     will need to be tinkered with slightly to get the right positioning. */
  text-underline-offset: -0.33em;
}

The complete solution ¶

The ink-skip issue is fixed by adding text-decoration-skip-ink: none;.

While text-underline-offset is reasonably well supported, it is still new and can be wrapped in a @supports condition to be sure that any browsers that don’t support it fall back to text-decoration: line-through.

del {
  text-decoration: line-through;
}

@supports(text-underline-offset: 1em) {
  del
    text-decoration: underline;
    text-underline-offset: -0.33em;
    text-decoration-skip-ink: none;
  }
}

Caveats ¶

Sadly this comes at a compromise. As the underline is rendered behind the text, using text-decoration-color no longer has the desired effect. Until we get something like text-decoration-offset we have to choose one or the other.

• Edited March 9, 2021
  • Added the caveat about text-decoration-color compromise; thanks to @dannievinther.
  • Moved the @support wrapper outside of del to be valid CSS rather than Scss; thanks to @PaulJMorel.