Css 文本上的透明删除线

我需要用CSS在文本上实现一个透明的删除线，这样我就不必用

我所拥有的：


正文{
背景：url(http://lorempixel.com/output/people-q-c-640-480-1.jpg);
背景尺寸：封面；
}
h1{
字体系列：arial；
位置：相对位置；
显示：内联块；
}
h1：之后{
内容：''；
位置：绝对位置；
宽度：100%；
高度：2倍；
左：0；顶：17px；
背景：#fff；
}
示例
您可以通过CSS使用
行高
和
溢出：隐藏来实现文本上的透明删除线属性

演示：

输出：



说明：

步骤1：隐藏高度为0.52em的
文本底部；溢出：隐藏使用em单位，使高度适应您用于
标记的字体大小

步骤2：“重写”伪元素中的内容，以最小化标记并防止内容重复。您可以使用自定义数据属性来保留标记中的所有内容，而不必编辑每个标题的CSS。

步骤3：将伪元素文本与顶部对齐，以便仅底部显示
行高：0


相关代码：


正文{
背景：url(http://lorempixel.com/output/people-q-c-640-480-1.jpg);
背景尺寸：封面；
}
h1{
字体系列：arial；
位置：相对位置；
}
h1跨度，h1：之后{
显示：内联块；
高度：0.52em；
溢出：隐藏；
字号：5em；
}
h1：之后{
内容：attr（数据内容）；
线高：0；
位置：绝对位置；
顶部：100%；左侧：0；
}
示例
您可以在webkit浏览器中使用屏蔽来实现这一点

CSS


这是一幅图像，很可能是用illustrator创建的，其中使用了一个剪切遮罩来“剪切”文本中的那条线，让您可以看到它背后的背景。无法在html和css@ChrisM尽管CSS通常不能实现“剪切”效果，但这一个是。@WebTiki好的，我想从技术上来说，你已经通过一些技巧实现了。你实际上是在写两遍这个词，然后把它的各个部分删掉。我不明白为什么<代码>行高：0 把文本推到下半部分，而不是顶部。@克里斯：这完全取决于你认为什么是黑客。在我的实现中，CSS/HTML根据W3标准是有效的。对于只显示底部的文本，这是因为
行高：0
，它将文本垂直居中于容器顶部，当我在容器上设置
上下：隐藏时，只显示文本的底部。@ChrisM它不会完全隐藏它，因为我设置了元素的高度。
溢出：隐藏属性根据高度隐藏，而不是根据线条高度隐藏。这是一个多么聪明的实现。谢谢你，我尝试实现这一点，但我将尝试使用´：before`和´：after`来突出显示文本，并且使用透明颜色。如果我成功了，我会发布这个。@Kael很抱歉，我不明白你最后的评论：(
h1 {
    -webkit-mask-image: linear-gradient(0deg, white 20px, transparent 20px,  transparent 24px, white 24px);
}