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

Question

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

我试过了

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

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

原文由 JPM 发布，翻译遵循 CC BY-SA 4.0 许可协议

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;
}

演示

​​​

原文由 bookcasey 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

处理好能见度后，请随意摆弄这个位置，以避免多余的空间。

就像是，

 myspan {
    visibility: hidden;
    position: relative;
}

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

原文由 PiyushW 发布，翻译遵循 CC BY-SA 4.0 许可协议