How to Double Strikeout a Text in HTML?

html css tags

25,038

Solution 1

The only (clean-ish) way I could think of (that doesn't involve additional elements being added) is to use the :after CSS pseudo-element:

del {
    text-decoration: none;
    position: relative;
}
del:after {
    content: ' ';
    font-size: inherit;
    display: block;
    position: absolute;
    right: 0;
    left: 0;
    top: 40%;
    bottom: 40%;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

JS Fiddle demo.

This is likely to to not work at all in Internet Explorer < 9 (but I don't have any IE with which I could test), but should be functional in up-to-date browsers. Checked in: Firefox 4.x, Chromium 12 and Opera 11 on Ubuntu 11.04.

A more reliable cross-browser method is to use a nested element (in this instance a span) within the del:

<del>This text has a (contrived) double strike-through</del>

Coupled with the CSS:

del {
    text-decoration: none;
    position: relative;
}
span {
    position: absolute;
    left: 0;
    right: 0;
    top: 45%;
    bottom: 35%;
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
}

JS Fiddle demo.

Solution 2

You can use the del tag with text-decoration-style: double for a double strikethrough.

<del style="text-decoration-style: double;">Text with double strike through <br/>
Multiline text also works.
</del>

To apply a double strikethrough on normal text inside a span or other tag, you can use text-decoration-line: line-through and text-decoration-style: double.

<span style="text-decoration-line: line-through; text-decoration-style: double;">
Text with double strikethrough
</span>

Both properties can be combined with the text-decoration shorthand.

<span style="text-decoration: line-through double;">
Text with double strikethrough
</span>

Solution 3

I've used a background image for this purpose before.

Sample CSS:

.s2 { 
    background: url('dblstrike.gif');
    background-repeat: repeat-x;
    background-position: center left;
    background-attachment: scroll;
    }

Where dblstrike.gif is a repeatable image with two horizontal lines.

This only works under limited conditions, you would for example need different background images for different font-sizes.

Solution 4

A font-size independent CSS solution:

CSS:

del {
    background: url('/images/Strike.gif') repeat-x left 0.72em;
}

See http://jsfiddle.net/NGLN/FtvCv/1/.

Strike.gif could be a 20x1 pixel image in the font color. Just reset background-image for del in containers with different text color.

Solution 5

Not that complicated with css:

.textDoubleStrikeThru {
    text-decoration: line-through;
    text-decoration-style: double;
}

Seems like this produces the strike-through positioned where the single strike-through is positioned and then adds a second strike-through beneath that.

View more solutions

25,038

John Doe

Updated on July 09, 2022

Comments

John Doe almost 2 years

I know about <s>, <del> and <strike> tags. These tags strike out a text once, however I want to strike out a text 2 times discontinuously. Can anyone please tell me how to do it? Thanks in advance.
- BoltClock almost 13 years
  
  By the way, the semantically-meaningful one to use out of these is <del>.
- Sikshya Maharjan almost 13 years
  
  Can you define what you mean by 'discontinuously'?
BoltClock almost 13 years

Well I suppose with some tricks you could achieve something with CSS but it would probably involve some weird code to come up with such an effect.
John Doe almost 13 years

Damn, I thought CSS would help. :( nyways Thanks :)
Zoidberg almost 13 years

You are correct, like science, one has to ask whether it SHOULD be done before they ask COULD it be done. Unfortunately, pointy haired bosses don't like to here the should part, they only want to know the could part, so that is why I posted my answer, even though I would try and talk my pointy haired boss out of such a requirement.
topepo almost 11 years

This is a very cool trick. One caveat though, it doesn't work if the text spans multiple lines.
Pedro Ferreira about 8 years

Just great the «reliable cross-browser method » solution!
gan gary over 7 years

think it works for FF/Chrome/IE/iPad; but think not work for Edge multiple line?
Andrew almost 7 years

Worked immediately in Firefox. Thanks!
Andrew almost 7 years

Yeah they're right though this doesn't work with multiline.
BoltClock over 6 years

@Christian: Because the problem cannot be solved conventionally. What else do you expect me to say?
Unmitigated over 4 years

This is no longer true.