如何在 HTML 中双删除线?

2022-01-18 00:00:00 tags html css

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

I know about <s>, <del> and <strike> tags. These tags strike out a text once, however I want to strike out a text 2 times discontinuously. Can anyone please tell me how to do it? Thanks in advance.

推荐答案

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

The only (clean-ish) way I could think of (that doesn't involve additional elements being added) is to use the :after CSS pseudo-element:

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 演示.

这很可能在 Internet Explorer 中根本不起作用 <9(但我没有 any IE 可以用来测试)，但应该可以在最新的浏览器中使用.已签入:Ubuntu 11.04 上的 Firefox 4.x、Chromium 12 和 Opera 11.

This is likely to to not work at all in Internet Explorer < 9 (but I don't have any IE with which I could test), but should be functional in up-to-date browsers. Checked in: Firefox 4.x, Chromium 12 and Opera 11 on Ubuntu 11.04.

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

A more reliable cross-browser method is to use a nested element (in this instance a span) within the del:

<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 演示.

相关文章