CODEWITHSUNDEEP
htmlcsstextoverlay
Kapitano
Kapitano

Reputation: 163

Custom Strikethrough CSS

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?

Upvotes: 0

Views: 2079

Answers (1)

Jonathan
Jonathan

Reputation: 6537

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>

Upvotes: 2

Related Questions