在 CSS 中，在元素上使用“display:none”，但保留它的“:after”答案

【问题标题】：In CSS use "display:none" on the element, but keep its ":after"在 CSS 中，在元素上使用“display:none”，但保留它的“:after”
【发布时间】：2012-12-27 04:38:36
【问题描述】：

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

我试过了

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

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

【问题讨论】：

“但那没有用”——然后发生了什么？两者都不可见？
没错。两者都不可见。
我尝试在元素本身上设置content，但这也不起作用（无效）：jsfiddle.net/saJWC
恐怕你需要javascript。

标签： css

【解决方案1】：

不，这是不可能的。

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

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

而display:none 隐藏了包含所有子元素的元素。

编辑 1

在我看来，JavaScript 是您的最佳选择。即使没有 jQuery 更改文本也不难：

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

Demo

编辑 2

不过，如果你真的想用 CSS 来做，你可以使用负数 text-indent 隐藏文本，使用 relative 定位显示星号：

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

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

Demo

【讨论】：

你建议用什么方法来替换元素内容？
<span class="asterisk"><span id="myspan"> whatever</span></span> 与 .asterisk 跨度上的伪元素。但是，这确实应该使用 JavaScript 来处理。
请注意，提问者并没有要求 no-javascript 解决方案，只是一个 no-jQuery 解决方案。
"并且显示是继承的。" ——过于简单化了。我建议“并且 display:none 隐藏包括所有子元素在内的元素。”
为什么这个答案有这么多赞？它以“不，不可能”开头。而在其他答案中，至少有 3 种不同的方法可以实现目标。

【解决方案2】：

我认为一个非常简单的方法是利用 visibility 属性。但请注意，“隐藏”元素仍会占用空间。但是，如果您对此感到满意，只需将父元素设置为“隐藏”，将伪元素设置为“可见”即可：

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

处理好可见性后，您可以随意摆弄这个位置，以避免多余的空间。

类似的，

myspan {
    visibility: hidden;
    position: relative;
}

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

【讨论】：

非常酷的解决方案。虽然我相信你的意思是写myspan:after { visibility: visible; ...
@JonF。谢谢！修正了答案。

【解决方案3】：

这绝对是可能的。使用font-size: 0px 而不是display: none：

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

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

A demo is here.

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

【讨论】：

【解决方案4】：

用途：

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

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

【讨论】：

【解决方案5】：

正如@bookcasey 所解释的，在元素上设置display: none 不可避免地也会隐藏:after 或:before 伪元素（因为它们实际上并不是在元素之后或之前显示的东西，而是在元素内部添加的内容元素，在其实际内容之后或之前）。

但是根据旧的 (2003) CSS3 Generated and Replaced Content Module 草案，通过在元素上简单地设置 content 来用生成的内容替换元素的真实内容的目标原则上是可能的，例如

#myspan { content: "*"; }

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

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

【讨论】：

现在，将近 8 年后？

【解决方案6】：

可以，但您需要使用visibility:hidden 而不是display:none。

有关详细信息，请参阅以下问题中的答案： How can I replace text with CSS?

【讨论】：

【解决方案7】：

您需要将它们分成多个内容 DIV 块，因为样式是由子元素继承的。因此，一旦定义了父显示样式，就不可能了。

【讨论】：