How to change the strike-out / line-through thickness in CSS?

Question

I'm using the text-decoration: line-through in CSS, but I can't seem to find any way to vary the line thickness without inelegant hacks like <hr> or image overlays.

Is there any elegant way to specify the thickness of a line-through?

Answer 1

Here's a pure CSS method that doesn't require any unnecessary wrapper elements. As an added bonus, not only can you adjust the thickness of the strikeout, but you can control its color separately from the text color:

.strikeout {
  font-size: 4em;
  line-height: 1em;
  position: relative;
}
.strikeout::after {
  border-bottom: 0.125em solid red;
  content: "";
  left: 0;
  margin-top: calc(0.125em / 2 * -1);
  position: absolute;
  right: 0;
  top: 50%;
}

<span class="strikeout">Struck out text</span>

Use RGBa colors to make the strikeout semi-transparent:

.strikeout {
  font-size: 4em;
  position: relative;
}
.strikeout::after {
  border-bottom: 0.125em solid rgba(255, 0, 0, 0.5);
  content: "";
  left: 0;
  line-height: 1em;
  margin-top: calc(0.125em / 2 * -1);
  position: absolute;
  right: 0;
  top: 50%;
}

<span class="strikeout">Struck out text</span>

Or even make the strikeout a gradient! Just use a background combined with a height, in place of a border:

.strikeout {
  font-size: 4em;
  line-height: 1em;
  position: relative;
}
.strikeout::after {
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 0, 0, 1), rgba(0, 255, 0, 1), rgba(0, 0, 255, 1), rgba(255, 255, 255, 0));
  content: "";
  height: 0.125em;
  left: 0;
  margin-top: calc(0.125em / 2 * -1);
  position: absolute;
  right: 0;
  top: 50%;
}

<span class="strikeout">Struck out text</span>

This works in IE9 (sans gradient) and up – or even IE8 if you use the single-colon :after syntax and manually write the negative margin-top value instead of using calc().

The main downside is that this only works on a single line of text. But hey, you take what you can get ;-)