是否可以为“text-decoration：line-through”指定线宽;在CSS？

Question

CSS中直通属性的默认权重1px非常适合1em的正文复制。

不幸的是，对于较大的商品，例如在优惠网站上设置为3em的价格，1px实在太轻了。是否可以为直通线设置较重的线宽？

如果没有，我应该考虑哪些替代方案，例如图像叠加？

Answer 1

你可以在现代浏览器中做这样的事情

.strike{
    position: relative;
}

.strike::after{
    content: '';
    border-bottom: 4px solid red;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
}


I <span class="strike">love</span> hate hotdogs

也是一个小提琴： http://jsfiddle.net/TFSBF/

Answer 2

这是另一种使用虚假打击的方法（它看起来很棒，适用于所有浏览器，虽然费用很小）。图像为黑色1px x 2px框。

del {
    background: url(/images/black-1x2.png) repeat-x 0 10px;
}

Answer 3

我认为这是一个浏览器实施问题。

请参阅此页http://jsbin.com/arucu5/2/edit

在IE8和Firefox中，线宽通过字体大小增加。 但是在Safari和Chrome中它保持1px

你总是可以像这样肮脏的Ghetto方法 http://www.overclock.net/web-coding/167926-ghetto-css-strike-through.html

Answer 4

这应该有效：

 <style>
 span.strike {
         font-weight:bold; /*set line weight here*/
         color:red;
         text-decoration:line-through;
 }

 span.strike>span {
        font-weight:normal;
        color: black;
 }
 </style>

<span class="strike"><span>$20.00</span></span>

Answer 5

我找到了另一种为多行文字设置线宽的方法：

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高度）。它也可以独立于字体大小。

只有一个缺点 - 背景呈现在文本下面。

Answer 6

你可以用样式加粗线条。

例如：

text-decoration-thickness: 3px;