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

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 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-through and text-decoration-style: double.

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

See also: text-decoration-style, text-decoration

Answer 3

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 4

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;
}

Answer 5

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 6

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.