How to Double Strikeout a Text in HTML? - html

Question

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.

Answer 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.

Answer 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>
See also: text-decoration-style, text-decoration-line, text-decoration

Answer 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.

Answer 4

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.

Answer 5

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 6

You can do it... why you want two strike-throughs instead of one sounds like the demands of a pointy haired boss who "isn't crazy about the font". It is possible to hack in a solution.
Here is the html
This is my text with <span class="double-strike"><div class="the-lines"></div>
two lines through it</span> in a paragraph because of crazy weird
<span class="double-strike"><div class="the-lines"></div>requirements</span>
Now the CSS
span.double-strike {
position: relative;
}
span.double-strike div.the-lines {
position: absolute;
top: 10px; /* Depends on the font size */
left: 0;
border-top: 3px double black;
width: 100%;
height: 100%;
}
ALSO, make sure you are running in strict mode, or else you will have a few issues in IE.
Here's a jsfiddle of the example

Answer 7

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.

Answer 8

Here another code, again with the known draw-backs: Additional code-requirements in the HTML (a span tag inside the del tag) and dependence on font size. This code has the advantages that it allows for multiple lines to have double line-through:
del.double-strike {
position: relative;
top: 20px; /*this depends on font size!*/
border-top: 3px double black; /*this is the actual "double line-through"*/
text-decoration:none; /*suppress normal line-through of del tag*/
}
del.double-strike span {
position: relative;
top: -20px; /*this must mach the above offset*/
}

Answer 9

try the following: it supports double strikeout cross lines and can be used in ordered list or unordered list.
Just quote the text with <del> then <span class='del'>. See below (I borrow the sample from previous post of Mach).
<p>This is my text with <del><span class='del'>two lines through it</span></del>
in a paragraph because of crazy weird requirements</p>
<div>This is my text with <del><span class='del'>two lines through it</span></del>
in a paragraph because of crazy weird requirements</div>
The CSS is as below:
del {
padding:0; margin:0;
position: relative;
text-decoration:none;
display: inline;
left: 0;
top: 0.8em;
border-top: 5px double red;
}
del > span.del {
padding:0; margin:0;
position: relative;
top: -0.8em;
left: 0;
width:100%;
color: black;
}