如何改变CSS中的走出/走线厚度？ [英] How to change the strike-out / line-through thickness in CSS?

问题描述

我在CSS中使用 text-decoration：line-through ，但是我似乎没有找到任何方法来改变线宽而没有不雅的黑客< hr> 或图像叠加。

有任何优雅的方法来指定线宽？

解决方案

这里是一个纯CSS方法，不需要任何不必要的包装元素。作为额外的好处，您不仅可以调整删除线的粗细，还可以根据文字颜色单独控制其颜色：

 。 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 = undout>分离文字< / span>  

使用RGBa颜色以使删除半透明：

  .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 = < / div> 
 
 
 
或者甚至使罢工一个梯度！只需使用背景与 height 组合，代替边框：
 
 
 
 
 
 
  .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， 1），rgba（0,0,255,1），rgba（255,255,255,0））; content：;身高：0.125em; left：0; margin-top：calc（0.125em / 2 * -1）; position：absolute; right：0; top：50％;}  
 
 < span class = striout>分叉文本< / span>  
 
 
 
在IE9（无梯度）和上 - 甚至IE8如果你使用单冒号：之后语法和手动写负的 margin-top ，而不是使用 calc（）。
 
 
 
主要的缺点是在一行文本。但嘿，你拿你能得到的;  - ）
 
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?
解决方案
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 ;-)

                        
这篇关于如何改变CSS中的走出/走线厚度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！