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

css, html, line-through

Solution

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

Problem

Original source