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

2019-03-08 06:51发布

站内问答 / HTML/CSS
1331 10 5

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?

10条回答
傲
2楼-- · 2019-03-08 07:36

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

查看更多
0人赞 添加讨论(0) 举报
疯言疯语
3楼-- · 2019-03-08 07:37

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

查看更多
0人赞 添加讨论(0) 举报
Luminary・发光体
4楼-- · 2019-03-08 07:43

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

查看更多
0人赞 添加讨论(0) 举报
姐就是有狂的资本
5楼-- · 2019-03-08 07:44

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>
查看更多
0人赞 添加讨论(0) 举报
上一页 1 2
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)