在CSS中使用“ display：none”在元素上，但保留其“：之后” [英] In CSS use "display:none" on the element, but keep its ":after"

问题描述

是否可能不像 display：none 那样显示元素，而是继续显示：before 和/或：after ？

Is it possible to not display an element, as with display:none, but continue to display the :before and/or :after?

我尝试过

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

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

but that didn't work. I'm trying to have CSS replace the content of a span with an asterisk, without introducing jQuery.

推荐答案

不，这是

伪元素呈现为子级：

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

然后 display：none 隐藏元素包括所有孩子。

And display:none hides the element including all children.

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

JavaScript is your best option in my opinion. Even without jQuery changing text is not hard:

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

演示

但是，如果您真的想使用CSS进行操作，则可以使用负数文本缩进隐藏文本，相对定位以显示星号：

However, if you really want to do it with CSS, you can use negative text-indent to hide the text and relative positioning to show the asterisk:

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

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

演示

这篇关于在CSS中使用“ display：none”在元素上，但保留其“：之后”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！