Html 自定义删除线CSS

我想改变“del”HTML标记的行为，使其在每个字符上覆盖一条斜线

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

---

这可能吗？

根据评论，使用单空格字体很容易做到这一点。最简单的方法可能是使用

背景图像

显然，仅使用CSS无法将空格与任何其他字符区分开来，因此它们要么像其他字母一样被划掉，要么必须在每个单词周围放置一个

标记

正文{
字体系列：“Incolata”，单空格；
}
德尔{
文字装饰：无；
背景图片：url(https://i.imgur.com/OBq3XE9.png);
背景重复：重复-x；
背景尺寸：自动88%；
背景位置：左26%；
}
瑞德先生{
颜色：红色；
}
雷德·德尔先生{
背景图片：url(https://i.imgur.com/GISo6rF.png);
}

测试！千万别想在家里试试这个。把这样的单词划掉。
测试！千万别想在家里试试这个。

根据评论，使用单空格字体很容易做到这一点。最简单的方法可能是使用

背景图像

显然，仅使用CSS无法将空格与任何其他字符区分开来，因此它们要么像其他字母一样被划掉，要么必须在每个单词周围放置一个

标记

正文{
字体系列：“Incolata”，单空格；
}
德尔{
文字装饰：无；
背景图片：url(https://i.imgur.com/OBq3XE9.png);
背景重复：重复-x；
背景尺寸：自动88%；
背景位置：左26%；
}
瑞德先生{
颜色：红色；
}
雷德·德尔先生{
背景图片：url(https://i.imgur.com/GISo6rF.png);
}

测试！千万别想在家里试试这个。把这样的单词划掉。
测试！千万别想在家里试试这个。

斜杠是否需要放在每个字符的相同位置？你使用单空格字体吗？是的，是的。对不起，我应该指定的。我在unicode PUA中使用了一个特殊创建的字符-斜杠，但宽度间隔为零，位置左侧有一个字符空间。所以在每个普通字符之后，都会粘贴这个。它能工作，但很笨重。是的，这是可能的。你试过什么？@Milken：我试过背景图像和重复线性梯度法——下面也是Johnathan建议的。对Hans建议的after:：方法有困难。还尝试创建修改过的字体，用struckthru常规字符替换粗体斜体字符。行得通，但效率很低。@Kapitano有什么东西不适合我的方法吗？至于：after方法，我看不出每个字符有一个打击是怎么可能的（基本上不把它与我的一个方法结合使用）。我希望汉斯能找到一个更好的解释。斜杠是否需要在每个字符上放在相同的位置？你使用单空格字体吗？是的，是的。对不起，我应该指定的。我在unicode PUA中使用了一个特殊创建的字符-斜杠，但宽度间隔为零，位置左侧有一个字符空间。所以在每个普通字符之后，都会粘贴这个。它能工作，但很笨重。是的，这是可能的。你试过什么？@Milken：我试过背景图像和重复线性梯度法——下面也是Johnathan建议的。对Hans建议的after:：方法有困难。还尝试创建修改过的字体，用struckthru常规字符替换粗体斜体字符。行得通，但效率很低。@Kapitano有什么东西不适合我的方法吗？至于：after方法，我看不出每个字符有一个打击是怎么可能的（基本上不把它与我的一个方法结合使用）。我希望汉斯能找到一个更好的答案来解释。只要文本颜色与背景图像匹配，这个方法就行了。不幸的是，我使用了几种文本颜色。如果要将斜杠放在顶部，可以在

psuedo元素之后使用
：，并将If绝对定位在
del
标记上，宽度和高度为100%。（你需要相对定位
del
标记以获得绝对值以捕捉到它）@Kapitano你可以创建多个图像来匹配你正在使用的字体颜色，请参阅更新的帖子。我还添加了另一个例子，以及如何使用
重复线性渐变
来实现这一点。这有一个明显的优点，即支持任意多的颜色，而无需生成新的图像。如果文本颜色与背景图像匹配，则此功能可以正常工作。不幸的是，我使用了几种文本颜色。如果要将斜杠放在顶部，可以在
psuedo元素之后使用
：，并将If绝对定位在
del
标记上，宽度和高度为100%。（你需要相对定位
del
标记以获得绝对值以捕捉到它）@Kapitano你可以创建多个图像来匹配你正在使用的字体颜色，请参阅更新的帖子。我还添加了另一个例子，以及如何使用
重复线性渐变
来实现这一点。这有一个明显的优势，即支持您想要的多种颜色，而无需生成新图像。