Is it possible to specify line weight for "text-decoration: line-through;" in CSS?

The default 开发者_如何学运维weight of 1px for line-through property in CSS is great for body copy at 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?

If not, what alternatives should I consider, such as an image overlay for example?

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/

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.

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

I think this is a browser implementation issue.

See this page 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

You can always a dirty Ghetto method like this http://www.overclock.net/web-coding/167926-ghetto-css-strike-through.html

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>$20.00</span></span>

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/

This approach assumes repeating an image (1px width and npx height). Also it works independent on the font-size.

Only one disadvantage - background renders under the text.

You can thicken the line with style.

For example:

text-decoration-thickness: 3px;