How change height of line's strike-through

Question

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

enter image description here

@Harry Already read this question and not say the height of line. — Mirko Cianfarani, Sep 10 '14 at 08:43
Oh Ok. In that case does Hashem's answer address your query? If not, could you please clarify more on which height you are looking for? — Harry, Sep 10 '14 at 08:46
I want to change the height of the line that is above the line. — Mirko Cianfarani, Sep 10 '14 at 08:50
@MirkoCianfarani It seems I misunderstood the question; To answer this I should note that it's not possible to handle the line itself in order to style it, etc. Thus, you have to fake the effect like what Mikode has done. — Hashem Qolami, Sep 10 '14 at 08:52
There are also more alernative solution... how Harpem Mikode is a solution but after I put accepted answer — Mirko Cianfarani, Sep 10 '14 at 08:58
@MirkoCianfarani if you change the **height** of the **.through** class in my answer and adjust the **top** % value to suit your needs it does exactly what you want. — MikeeeG, Sep 10 '14 at 09:13

MikeeeG · Answer 1 · 2014-09-10T08:58:41.957

4

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

edited Sep 10 '14 at 08:58

answered Sep 10 '14 at 08:45

MikeeeG

331
1
5
21

the position from the top doesn't have to be in % though. you could set the line-height of **.strike** in pixels and use a pixel value for the **.through** top position. – MikeeeG Sep 10 '14 at 08:52
Good job Mikode, I'd suggest having a look at `currentColor` keyword which helps to color the *line* based on the value of `color` property. Also adding a negative margin make it look better: http://jsfiddle.net/hashem/xwym515p/2/ – Hashem Qolami Sep 10 '14 at 08:58
Perfect solution good for you.... – Mirko Cianfarani Sep 10 '14 at 08:59
yeah currentColor is good but its browser support is poor and this way you have complete control over colours should you wish to have different coloured strike throughs. Your **margin-top** addition seems strange though as is negates the % given to the **top** value already given. – MikeeeG Sep 10 '14 at 09:05

score 4 · Accepted Answer · answered Sep 10 '14 at 08:57

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

score 1 · Answer 3 · answered Sep 10 '14 at 08:44

1

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

answered Sep 10 '14 at 08:44

Arpad Bajzath

896
8
19

mmm good alternative but with css work better s:after { position: absolute; left: 0; right: 0; top: 5px; content: " "; background: red; height: 8px; } – Mirko Cianfarani Sep 10 '14 at 09:04

score 1 · Answer 4 · answered Sep 10 '14 at 08:44

1

Try this

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

answered Sep 10 '14 at 08:44

Shafeeque

2,039
2
13
28

This alternative solution work but have to change "transparent" – Mirko Cianfarani Sep 10 '14 at 08:58

How change height of line's strike-through

4 Answers4