html - 自定义删除线 CSS

Question

我想更改“del”HTML 标记的行为，以便它在每个字符上覆盖一条斜线。

这可以通过位图图形、颜色渐变、在每个前面的字符上放置一个“/”字符或其他方式来完成，但希望不要使用 javascript。

这可能吗？

Answer 1

根据评论，使用等宽字体可以很容易地做到这一点。最简单的可能是 background-image .

显然，仅使用 CSS 时，无法将空格与任何其他字符区分开来，因此它们要么像其他字母一样被划掉，要么您必须输入 <del>。标记每个单词。

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>

您也可以使用 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>