是否可以为“text-decoration: line-through;”指定线宽？在 CSS 中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3928315/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to specify line weight for "text-decoration: line-through;" in CSS?
提问by Andrew De Andrade
The default weight of 1px for line-through property in CSS is great for body copy at 1em.
CSS 中 line-through 属性的默认权重 1px 非常适合 1em 的正文。
Unfortunately for larger items such as a price set at 3em on an offer site, 1px is really too light. Is it possible to set a heavier line weight for line-through?
不幸的是，对于较大的项目，例如报价网站上的 3em 价格，1px 实在是太轻了。是否可以为线路通过设置更重的线路重量？
If not, what alternatives should I consider, such as an image overlay for example?
如果没有，我应该考虑哪些替代方案，例如图像叠加？
采纳答案by Daveo
I think this is a browser implementation issue.
我认为这是浏览器实现问题。
See this page http://jsbin.com/arucu5/2/edit
请参阅此页面http://jsbin.com/arucu5/2/edit
In IE8 and Firefox the line through width increases with the font size. However in Safari and Chrome it remains at 1px
在 IE8 和 Firefox 中，线的宽度随着字体大小而增加。但是在 Safari 和 Chrome 中它仍然是 1px
You can always a dirty Ghetto method like this http://www.overclock.net/web-coding/167926-ghetto-css-strike-through.html
你总是可以像这样一个肮脏的 Ghetto 方法 http://www.overclock.net/web-coding/167926-ghetto-css-strike-through.html
回答by Adam Meyer
You can do something like this in modern browsers
你可以在现代浏览器中做这样的事情
.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
Made a fiddle of it too: http://jsfiddle.net/TFSBF/
也做了一个小提琴：http: //jsfiddle.net/TFSBF/
回答by Eric
Here's another way to do it with a fake strike-through (which looks great and works on all browsers, albeit with the cost of a tiny imageload). The image is a black 1px by 2px box.
这是使用假删除线的另一种方法（它看起来很棒并且适用于所有浏览器，尽管需要很小的图像加载成本）。图像是一个黑色的 1px x 2px 框。
del {
background: url(/images/black-1x2.png) repeat-x 0 10px;
}
回答by linuxrules94
This should work:
这应该有效：
<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>.00</span></span>
回答by Goodnickoff
I've found another approach to set line weight for multiline text:
我找到了另一种为多行文本设置线宽的方法：
span {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAIAAADdv/LVAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAASSURBVHjaYvrPwMDEAMEAAQYACzEBBlU9CW8AAAAASUVORK5CYII=');
background-repeat: repeat-x;
background-position: center;
}
Here is an example: http://output.jsbin.com/weqovenopi/1/
这是一个例子：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.
此方法假设重复图像（1px 宽度和 npx 高度）。它也独立于字体大小工作。
Only one disadvantage - background renders under the text.
只有一个缺点 - 背景呈现在文本下方。
