7

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

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
user1760110
  • 2,256
  • 5
  • 29
  • 37
  • The width of the strike is the width of the text (not the width of the element, which equals the available total width for a block element like `h3`). – Jukka K. Korpela Feb 01 '14 at 07:29

2 Answers2

16

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;
}
Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
1
padding: N px;
line-height: N px;

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