在 CSS 中，在元素上使用“display:none”，但保留其“:after”

Question

是否可以不显示元素，如 display:none，但继续显示 :before 和/或 :after？

我试过了

#myspan       {display:none}
#myspan:after {display:inline; content:"*"}

但这没有用。我试图让 CSS 用星号替换跨度的内容，而不引入 jQuery。

Answer 1

不，这是不可能的。

伪元素像子元素一样渲染：

<span id="myspan">whatever<after></span>

并且

display:none

隐藏包含所有子元素的元素。

编辑1

我认为 JavaScript 是你最好的选择。即使没有 jQuery，更改文本也不难：

document.getElementById("myspan").innerHTML = "*";​

演示

编辑2

但是，如果您确实想使用 CSS 来实现，则可以使用负值

text-indent

来隐藏文本，并使用

relative

定位来显示星号：

#myspan {    
    text-indent: -9999px;
    display: block;
}

#myspan:before {
    content: '*';
    position: absolute;
    top: 0;
    left: 9999px;
}

演示

Answer 2

我认为做到这一点的一个非常简单的方法是利用 visibility 属性。但请注意，“隐藏”元素仍然占据空间。但如果你同意的话，只需使父元素“隐藏”和伪元素“可见”：

#myspan        {visibility:hidden}
#myspan: after {visibility:visible}

一旦你处理好可见性，就可以随意调整位置，以避免多余的空间。

类似的东西，

myspan {
    visibility: hidden;
    position: relative;
}

myspan:after {
    visibility: visible;
    position: absolute;
    left: 10px;
}

Answer 3

您可以使用

font-size: 0px

代替

display: none

:

#myspan {
    /* display: none; */
    font-size: 0px;
}

#myspan:after {
    /* display: inline; */
    font-size: 16px;
    content: "*"
}

演示在这里。

在这种情况下，您只能使用 px/pt 作为显示文本字体单位。

Answer 4

用途：

#myspan       {font-size:0}
#myspan:after {font-size:16px; content:"*"}

如果指定了最小字体大小，它将不起作用（浏览器设置）。我只会将此方法用于上一个和下一个按钮之类的操作，以便屏幕阅读器会读取“上一个”，但您想将其替换为“e”。因此，计划一下它会是什么样子和显示的文本。

Answer 5

正如 @bookcasey 所解释的，在元素上设置

display: none

也不可避免地会隐藏

:after

或

:before

伪元素（因为它们实际上并不是在元素之后或之前显示的内容，而是在元素内部添加的内容，在其真实内容之后或之前）。 但是，根据旧的（2003）

CSS3生成和替换的内容模块

草案，通过生成的内容替换元素的真实内容原则上是可能的，只需在元素上设置content，例如

#myspan { content: "*"; }

到目前为止，只有 Opera 支持此功能。但 WebKit 浏览器也支持替换内容是图像的特殊情况：

#myspan { content: url(asterisk.png); }

Answer 6

visibility:hidden

而不是

display:none

。有关更多详细信息，请参阅以下问题的答案：

如何用 CSS 替换文本？

Answer 7