How to Double Strikeout a Text in HTML?

Question

I know about , and tags. These tags strike out a text once, however I want to strike out a text 2 time

Answer 1

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.

Answer 2

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.

Answer 3

You can't have more than one typographic strike through your text. At most you can have a strikethrough and an underline, but I have a feeling that's not what you're going for. A double strikethrough, though, is not possible with HTML or CSS's font properties alone.