html - 如何在 HTML 中对文本进行双删除线？

Question

我知道 <s> , <del>和 <strike>标签。这些标签删除一次文本，但是我想不连续地删除文本 2 次。谁能告诉我该怎么做？提前致谢。

Answer 1

我能想到的唯一(干净的)方法(不涉及添加额外的元素)是使用 :after CSS 伪元素:

del {
    text-decoration: none;
    position: relative;
}
del:after {
    content: ' ';
    font-size: inherit;
    display: block;
    position: absolute;
    right: 0;
    left: 0;
    top: 40%;
    bottom: 40%;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

JS Fiddle demo .

这在 Internet Explorer < 9 中可能根本不起作用(但我没有任何 可以测试的 IE)，但在最新版本中应该可以正常工作浏览器。 checkin :Ubuntu 11.04 上的 Firefox 4.x、Chromium 12 和 Opera 11。

一种更可靠的跨浏览器方法是在 del 中使用嵌套元素(在本例中为 span):

<del>This text has a (contrived) double strike-through</del>

加上CSS:

del {
    text-decoration: none;
    position: relative;
}
span {
    position: absolute;
    left: 0;
    right: 0;
    top: 45%;
    bottom: 35%;
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
}

JS Fiddle demo .