How to change the strike-out / line-through thickn

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

I have an idea but it would require adding an additional element for each level of thickness.

html

<span><strike>test test</strike></span><br />  
<span id="test"><strike>           </strike></span>

css

span {height:1em}
#test {position:relative;top:-1.3em}

BTW the spaces in the second span are specials - you will have to use alt+0160 or alt+255.
You can use pixels unit too on the negative top when ull try to position it precisely.

---

There is another alternative which involve using first text-decoration and then style <strike> or <del> and see if you can nudge it vertically without moving the text with it.

html

<span><strike>test test</strike></span>

css

span {text-decoration:line-through;color:red}
strike {position:relative;top:1px}

Both are working fine here, but remember to use a transitional doctype cause <strike> has been deprecated.

Answer 2

I've found another approach for multiline text:

span {
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAIAAADdv/LVAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAASSURBVHjaYvrPwMDEAMEAAQYACzEBBlU9CW8AAAAASUVORK5CYII=');
  background-repeat: repeat-x;
  background-position: center; 
}

http://output.jsbin.com/weqovenopi/1/

This approach assumes repeating an image (1px width and npx height). Also it works independent on the font-size.

Only one disadvantage - background renders under the text.

Answer 3

I realize this is old, but there is a way to do it using nested span tags:

<span style="text-decoration: line-through; font-size: 2em;">
  <span style="font-size: 0.5em; vertical-align: middle;">
    Striked Text
  </span>
</span>

Strikethrough is dependent upon the size of the font, so if you double the outer span it will make the line twice as thick. Then, you need to reduce the inner one by half. The vertical-align is necessary or else the line is too high, making it appear to almost be an overline.

In action: http://jsfiddle.net/moodleboy/deep3qw8/

Works in Chrome/FF, but not Safari, IE10 or Opera. Works on Chrome on Mac, but not Windows.

Answer 4

No.

However, if the strike-through color is the same as the text color, you can easily get away with using a custom image in the background.

If you require different colors, then overlaying the custom strike-through image is the only way to go.

Answer 5

I couldn't find an appropriate method here so I used background-image with a linear-gradient and ex CSS length units.

Unfortunately this means that using different font faces will render the strikethrough in a slightly different position (if the fonts have different x-heights).

.container {
  width: 300px;
}

.multiline-strikethrough {
  display: inline;
  background-image: linear-gradient(transparent 0.8ex, red 0.8ex, red 1.5ex, transparent 1.5ex);
}

.alt-1 {
  font-family: sans-serif;
  font-size: 2rem;
}

.alt-2 {
  font-family: sans-serif;
  font-size: 4rem;
  line-height 1;
}

<div class="container">
  <p class="multiline-strikethrough">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis, odio a consequat eleifend, leo ex tincidunt magna.</p>
</div>

<div class="container">
  <p class="multiline-strikethrough alt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis, odio a consequat eleifend, leo ex tincidunt magna.</p>
</div>

<div class="container">
  <p class="multiline-strikethrough alt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis, odio a consequat eleifend, leo ex tincidunt magna.</p>
</div>

Answer 6

This seems to be a longstanding question without an ideal solution for multi-line strikethroughs.

Conveniently, using CSS gradients, you can easily adjust your line thickness like so:

strike {
    text-decoration: none;
    background-image: linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 9px,transparent 9px);
}

See the demo and full vendor prefixing here: http://codepen.io/pearlchen/pen/dhpxu