Make a strikethrough line go more down

Question

How can I make a strikethrough line go more down for example

<p style="text-decoration: line-through;">HELLO</p>

View my fiddle for images because I need 10 reputation to post images.

http://stackoverflow.com/questions/2503364/can-i-change-the-vertical-position-of-a-strike-through-on-a-website — megawac, Feb 01 '14 at 07:11
@mplungjan I did search but here is the search results: http://stackoverflow.com/search?q=Make+a+strikethrough+line+go+more+down — C'mon, Feb 01 '14 at 07:16
I just answered [here](http://stackoverflow.com/questions/21495082/how-to-make-css-strike-through-wider-than-element/21495115#21495115), use CSS positioning — Mr. Alien, Feb 01 '14 at 08:38

score 0 · Answer 1 · answered Feb 01 '14 at 07:23

0

You can not do it with the strikethrough. one of my project I have same requirement, I have done it with some css trick but this is not good practice.

html

<div>HELLO<hr/></div>

css

div{
    position:relative;
    display:inline-block;
}
hr{
    position:absolute;
    top:11px;
    left:0;
    display:inline-block;
    width:100%;
}

jsFiddle Code

answered Feb 01 '14 at 07:23

Roy Sonasish

4,571
20
31

But what if I make the font-size bigger – C'mon Feb 01 '14 at 07:26
make the hr line top position 58%, it will work fine in all font size. – Roy Sonasish Feb 01 '14 at 07:28

score 0 · Accepted Answer · answered Feb 01 '14 at 07:23

0

If your text is only one line, this will work:

http://jsfiddle.net/delvarworld/KmE4q/

html:

<stricken>HELLO</stricken>

sass:

stricken {
    position:relative;

    &:after {
        content:"";
        position:absolute;
        left:0;
        right:0;
        top:32px;
        height:4px;
        background:#000;
        display:block;
    }
}

If your text is multiple lines, you would need to wrap each line in a <striken> tag, and not rely on browser word wrapping.

answered Feb 01 '14 at 07:23

Andy Ray

30,372
14
101
138

I'm using css not sass – C'mon Feb 01 '14 at 07:28
Then stop using css and start using sass – Andy Ray Feb 01 '14 at 07:38

score 0 · Answer 3 · answered Feb 01 '14 at 07:25

text-decoration:line-through; doesnt support the positioning of line. So, we cant do any change in that, it deppends on font as well. Possibly as a solution what we can do is to replace line with border and position it according to your needs

.center:after {
border-top: 1px solid #000;
position: absolute;
content: "";
right: 0;
top:65%;
left: 0;
}

Refer this:-

http://jsfiddle.net/sFPxL/

Make a strikethrough line go more down

3 Answers3