How to make linear access wider / larger than text / element using CSS

Question

Could you tell me how can I get CSS to make the line-through property wider than the width element?

Example

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

and the result looks like Now, how can I make the line wider than the element more obvious?

how

Answer 1

You can use   which is a crappy way of transitioning to

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

Demo

---

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

Demo

 div { text-decoration:line-through; } div:before, div:after { content: "\00a0\00a0"; } 

Note Using a common selector, consider using a class or id to customize the element, also if your text is between different text, consider wrapping in between and use :before and :after over span .

---

Clarify the answer here with a solution using CSS positioning techniques, with which you can also control the thickness of the stroke.

Here I put the absolute child element in the parent element. So make sure you declare position: relative; for the parent. Rest,: :after pseudo handles the rest, and make sure you use content: ""; Although it is empty, it is required.

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

Answer 2

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

  in html Nested Div <div><div></div></div>