Question

我想改变＆＃34; del＆＃34;的行为。 HTML标记，以便在每个字符上叠加斜线。

这可以通过位图图形，颜色渐变，放置＆＃34; /＆＃34;每个前一个角色或其他角色的角色，但希望不使用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>

自定义删除线CSS

1 个答案: