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 now how I can make the line wider than element to be more obvious?
Like
Strikethrough is dependent upon the size of the font, so if you double the outer span it will make the line twice as thick.
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.
You cannot modify the width of underline tag. Instead go for Border-bottom approach and change it's properties as required.
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.
You can use
which is a cheesy way to go for
<div> HELLO </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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With