How to change strikethrough / scroll thickness in CSS?

Question

I use text-decoration: line-through in CSS, but I cannot find a way to change the line thickness without inelegant hacks such as <hr> or image overlays.

Is there an elegant way to specify line thickness?

Answer 1

Here is a clean CSS method that does not require extra shell elements. As an added bonus, you can not only adjust the strikethrough thickness, 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 for translucent cross-out:

 .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 cross out the gradient! Just use background in combination with height instead of 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 (without a gradient) and up - or even in IE8 if you use a single colon :after syntax and manually write a negative margin-top value instead of using calc() .

The main disadvantage is that it only works on one line of text. But hey, you take what you can ,-)

Answer 2

This seems to be a long-standing issue without an ideal solution for multi-line strikethroughs.

Conveniently, using CSS gradients, you can easily adjust the line thickness as follows:

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

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

Answer 3

short answer: no. it depends on the font, it is the same for the thickness of the underline - it changes with the thickness of the text

Answer 4

I have an idea, but for this you will need to add an additional element for each thickness level.

HTML

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

CSS

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

By the way, spaces in the second run are special - you will have to use alt + 0160 or alt + 255.
You can use the pixel block too on the negative top when ull tries to set it exactly.

---

There is another alternative, which includes using the first text layout, and then the <strike> or <del> style and see if you can push 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 work fine, but remember to use the doctype transitional idea. <strike> deprecated.

Answer 5

No.

However, if the pass-through color matches the color of the text, you can easily get away with using a custom image in the background.

If you need different colors, then overlaying a custom end-to-end image is the only way.

Answer 6

I understand this is old, but there is a way to do this 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 depends on the font size, so if you double the outer range, it will make the line twice as thick. Then you need to reduce the inside in half. Vertical alignment is required, or the line is too high, which means it is almost superscript.

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

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

Answer 7

I found another approach for multi-line text:

 span { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAIAAADdv/LVAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAASSURBVHjaYvrPwMDEAMEAAQYACzEBBlU9CW8AAAAASUVORK5CYII='); background-repeat: repeat-x; background-position: center; } / png; base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAIAAADdv / LVAAAABGdBTUEAAK / INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAASSURBVHjaYvrPwMDEAMEAAQYACzEBBlU9CW8AAAAASUVORK5CYII ='); 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 involves repeating the image (1px width and npx height). It also works regardless of font size.

Only one drawback - the background is displayed under the text.

Answer 8

The thickness of the line is determined by the font (family, size, etc.). There is no provision in CSS for changing this http://www.w3.org/TR/REC-CSS1/#text-decoration

Answer 9

This does not answer the question, but it matters in the sense that it solves the problem of the lack of a unique successful attack using scripts. I am not a purist, but I believe this is an x-browser solution.

 <html> <script src="/js/jquery/jquery.js"></script> <script> function do_strike_out(idx) { $(this).wrap("<span style='position:relative;left:0px;top:0px;'>"). before( "<span style='margin-top:10px;border-top:1px solid #FF0000;"+ "position:absolute;width:100%;left:0px;'></span>" ). wrap("<span style='position:relative;left:0px;top:0px;'>"); } $(function(){ $('.strike_out').each(do_strike_out); }); </script> <body> A jquery hack to do colored strike-through <span class='strike_out'>STRIKE-OUT</span>, which, I realize does not answer your question, sorry, but may be of intest for others. </body> </html> 

Answer 10

I could not find a suitable method here, so I used a background-image with a linear gradient and former CSS length units .

Unfortunately, this means that when using different faces of the font, strikethrough will be performed in a slightly different position (if the fonts have different heights x).

 .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>