How to make line-through wider/bigger than text/element using CSS

Question

Can you please let me know how I can force CSS to make the line-through property wider than element width?

For Example

<h3 style="text-decoration:line-through">50</h3>

and result looks like now how I can make the line wider than element to be more obvious?

Like

Answer 1

You can use   which is a cheesy way to go for

<div>&nbsp;&nbsp;HELLO&nbsp;&nbsp;</div>

Demo

---

Or you can do is, use :before and :after pseudo with content property

Demo

div {
    text-decoration:line-through;
}

div:before,
div:after {
    content: "\00a0\00a0";
}

Note: Using a general selector here, consider using class or an id to target the element specifically, also, if your text is between other text, consider wrapping that in a span and than use :before and :after over span.

---

Briefing an answer here with solution that uses CSS Positioning techniques, using which you can also control the thickness of the strike through..

Here, am positioning the child element absolute to the parent element. So make sure you declare position: relative; on parent. Rest, :after pseudo handles the rest and also be sure that you use content: "";, though it's blank, it's mandatory.

Demo 3 (Using CSS Positioning)

div {
    position: relative;
    display: inline-block;
    padding: 0 10px;
    margin: 10px;
}

div:after {
    content: "";
    position: absolute;
    border: 2px solid #000;
    top: 50%;
    margin-top: -1px;
    width: 100%;
    left: -2px;
}