CODEWITHSUNDEEP
htmlcssline-through
user1760110
user1760110

Reputation: 2336

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

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 enter image description here now how I can make the line wider than element to be more obvious?

Like enter image description here

Upvotes: 8

Views: 6054

Answers (2)

user2930889
user2930889

Reputation: 

padding: N px;
line-height: N px;

&nbsp; in html Nested Div's <div><div></div></div>

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157314

You can use &nbsp; 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;
}

Upvotes: 19

Related Questions