How change height of line's strike-through [duplicate] - html

Question

This question already has answers here:
How to change the strike-out / line-through thickness in CSS?
(11 answers)
Closed 8 years ago.
Yesterday with one friend discuss for change height of line about strike-through.
Today searching on documentation of CSS says :
The HTML Strikethrough Element (<s>) renders text with a strikethrough, or a line through it.
Use the <s> element to represent things that are no longer relevant or no longer accurate.
However, <s> is not appropriate when indicating document edits;
for that, use the <del> and <ins> elements, as appropriate.
And seems that <s> accept all reference of CSS but not function on height.
CSS:
s {
color: red;
height: 120px
}
HTML:
<br /><br />
<s >Strikethrough</s>
There is a simpler demo on JSFIDDLE and you see that not change the height of line....
There is a alternative solution or I wrong on CSS?
EXPLAIN WITH IMAGE

Answer 1

I think the best way to handle this is to use a pseudo element to simulate the desired behavior.
s {
color: red;
display: inline-block;
text-decoration: none;
position: relative;
}
s:after {
content: '';
display: block;
width: 100%;
height: 50%;
position: absolute;
top: 0;
left: 0;
border-bottom: 3px solid;
}
The border inherits text-color and you gain full control over your styling, including hover effects.
JS Fiddle here

Answer 2

I've wanted to do this before and came up with this:
<span class="strike">
<span class="through"></span>
Strikethrough
</span>
and:
.strike {
position:relative;
color:red;
}
.strike .through {
position:absolute;
left:0;
width:100%;
height:1px;
background: red;
/* position of strike through */
top:50%;
}
JS Fiddle here
and if you want multiple strike throughs you can use something like this:
JS Fiddle - multi strikes

Answer 3

This is my alternative version.
s {
color: red;
position: relative;
text-decoration: none;
}
s:after {
position: absolute;
left: 0;
right: 0;
top: -10px;
content: " ";
background: red;
height: 1px;
}
JSFiddle demo

Answer 4

Try this
s {
color: red;
text-decoration: none;
background-image: linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 12px,transparent 9px);
height: 100px
}