如何对HTML中的文本进行双重删除？ [英] How to Double Strikeout a Text in HTML?

问题描述

我知道< s> ，< del> 和<罢工> 标签。这些标签一次删除一条文本，但是我想不连续两次删除一条文本。谁能告诉我该怎么做？

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（但我没有可以测试的任何 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演示。

这篇关于如何对HTML中的文本进行双重删除？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！