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

问题:

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?

回答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 ;-)

回答2:

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

回答3:

short answer: no. it depends on the font, it's the same for the thickness of underline—it changes with the thickness of the text

回答4:

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.

回答5:

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.

回答6:

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.

回答7:

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.

回答8:

The line thickness 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

回答9:

This does not answer the question, but is relevant in that it solves the lack of a unique strike-through using scripting. I am not a purist, but I believe this is a 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>

回答10:

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>