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

Question

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?

Answer 1

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/

Answer 2

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