Custom Strikethrough CSS

Question

I want to change the behaviour of the "del" HTML tag, such that it overlays a diagonal slash on each character.

This could be done with a bitmap graphic, a colour gradient, placing a "/" character over each previous character, or something else, but hopefully not using javascript.

Is this possible?

Answer 1

Based on the comments, this would be fairly easy to do with a monospace font. The easiest would probably be with background-image .

Obviously, with CSS-only, there will be no way of distinguishing a space from any other character, so either they will be crossed out like the other letters, or you would have to put a <del> tag around each word.

 body { font-family: 'Inconsolata', monospace; } del { text-decoration: none; background-image: url(https://i.imgur.com/OBq3XE9.png); background-repeat: repeat-x; background-size: auto 88%; background-position: left 26%; } .red { color: red; } .red del { background-image: url(https://i.imgur.com/GISo6rF.png); } 

 <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet"/> <div> Test! Do <del>not ever think of</del> try this at home. And <del>cross</del> <del>out</del> <del>individual</del> words like this. </div> <div class="red"> Test! Do <del>not ever think of</del> try this at home. </div> 

You could also accomplish this with background: repeating-linear-gradient :

 body { font-family: 'Inconsolata', monospace; } del { text-decoration: none; background: repeating-linear-gradient( -65deg, transparent, transparent 6px, #000 6px, #000 7px, transparent 7px, transparent 8px ); } .red { color: red; } .red del { background: repeating-linear-gradient( -65deg, transparent, transparent 6px, #f00 6px, #f00 7px, transparent 7px, transparent 8px ); } 

 <div> Test! Do <del>not ever think of</del> try this at home. </div> <div class="red"> Test! Do <del>not ever think of</del> try this at home. </div>