Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 205
user1760110 Avatar asked Feb 01 '14 06:02

user1760110


People also ask

How do you make a strikethrough thicker in CSS?

Strikethrough is dependent upon the size of the font, so if you double the outer span it will make the line twice as thick.

How do I strikethrough text in CSS?

Complete HTML/CSS Course 2022 To mark strikethrough text in HTML, use the <strike>… </strike> tag. It renders a strikethrough text. HTML deprecated this tag and it shouldn't be used in HTML5.

How do I increase the width of an underline in CSS?

You cannot modify the width of underline tag. Instead go for Border-bottom approach and change it's properties as required.

How do you set a MAX line in CSS?

The max-lines property limits the content of a block to a maximum number of lines before being cut off and can create a line clamping effect when combined with block-overflow . In fact, both properties make up the line-clamp property, which is a shorthand for combining them.


1 Answers

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;
}
like image 138
Mr. Alien Avatar answered Oct 20 '22 06:10

Mr. Alien