是否可以指定「text-decoration：line-through」的線條重量？在CSS中？

CSS中的直通屬性的默認權重爲1px，對於1em的正文複製非常有用。是否可以指定「text-decoration：line-through」的線條重量？在CSS中？

不幸的是，對於較大的商品，例如報價網站上3em的價格，1px實在太輕。是否可以爲直通設置較重的線路權重？

如果不是，我應該考慮哪些替代方案，例如圖像疊加？

來源

2010-10-13 Andrew De Andrade

我認爲這是一個瀏覽器實現問題。

參見本頁http://jsbin.com/arucu5/2/edit

在IE8和Firefox線通過與字體大小寬度增大。然而，在Safari和Chrome仍然在1px的

你總是可以這樣 http://www.overclock.net/web-coding/167926-ghetto-css-strike-through.html

來源

2010-10-13 22:40:39 Daveo

一個骯髒的貧民窟的方法，這裏的另一種方式用假透做（這看起來不錯，適用於所有的瀏覽器，儘管這是一個小圖片的成本）。該圖像是一個黑色的1px乘2px框。

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

來源

2012-02-07 21:23:48 Eric

這應該工作：

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

20 dollars

來源

2012-10-30 22:19:07 linuxrules94

這是爲什麼downvoted？ – linuxrules94 2013-11-14 18:04:30

謝謝，這個答案是正確的，非常有用。 – EminezArtus 2014-08-28 03:04:37

你可以做這樣的事情在現代瀏覽器

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

來源

2013-02-01 03:09:43

非常適合我 - 謝謝！ – poshaughnessy 2013-09-05 13:50:51

跨越兩行的文本是否有解決方案？ – Vnge 2014-08-29 14:11:14

我找到另一種方法來設置線權重的多行文本：

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

下面是一個例子： http://output.jsbin.com/weqovenopi/1/

這種方法假定重複的圖像（1像素寬度和NPX高度）。它也可以獨立於字體大小。

只有一個缺點 - 背景在文字下呈現。

來源

2015-05-13 15:48:13 Goodnickoff

是否可以指定「text-decoration：line-through」的線條重量？在CSS中？

回答

相關問題