如何改变CSS中的跳出/穿透厚度？

我在CSS中使用text-decoration: line-through ，但似乎无法find任何方法来改变线条粗细，而不需要像<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="strikeout">Struck out text</span>

这似乎是一个长期的问题，没有多线删除线的理想解决scheme。

使用CSS渐变方便起见，您可以轻松调整线条粗细，如下所示： 

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

请参阅此处的演示和完整供应商前缀： http : //codepen.io/pearlchen/pen/dhpxu

简短的回答：不。 它取决于字体，下划线的粗细是一样的 – 它随着文本的粗细而改变

没有。

但是，如果透视颜色与文本颜色相同，则可以轻松地在背景中使用自定义图像。

如果您需要不同的颜色，则覆盖自定义透视图像是唯一的方法。

我有一个想法，但它需要为每个厚度级别添加一个额外的元素。

HTML 

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

CSS 

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

顺便说一句，在第二个跨度的空间是特殊的 – 你将不得不使用alt + 0160或alt + 255。
当你试图精确定位时，你也可以在负极上使用像素单位。

还有另外一种方法，首先使用文本修饰 ，然后使用样式<strike>或<del> ，看看是否可以垂直移动文本而不移动文本。

HTML 

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

CSS 

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

这两个在这里工作正常，但请记住使用过渡文档types的原因<strike>已被弃用。

我意识到这是旧的，但有一种方法可以使用嵌套的span标签来做到这一点： 

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

删除线取决于字体的大小，所以如果您将外部跨度加倍，则会使线条变粗一倍。 然后，你需要减less一半的内在。 垂直alignment是必要的，否则线太高，使它看起来几乎是一个超线。

在行动： http : //jsfiddle.net/moodleboy/deep3qw8/

适用于Chrome / FF，但不适用于Safari，IE10或Opera。 适用于Mac上的Chrome，但不适用于Windows。

线条粗细由字体（家庭，大小等）决定。 CSS中没有提供用于更改此http://www.w3.org/TR/REC-CSS1/#text-decoration的规定;

这并没有回答这个问题，但相关的是，它解决了使用脚本缺乏独特的穿透。 我不是一个纯粹的，但我相信这是一个X浏览器的解决scheme。 

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

我发现了多行文本的另一种方法： 

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

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

这种方法假定重复一个图像（1px宽度和npx高度）。 它也可以独立于字体大小。

只有一个缺点 – 背景渲染下的文字。

Interesting Posts