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

Question

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

我试过了

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

但那没用.我试图让CSS用星号替换span的内容,而不引入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

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

#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:"*"}

如果指定了最小字体大小,则无效(浏览器设置).我只对前一个和下一个按钮之类的东西使用这种方法,这样屏幕阅读器会读取"上一页",但你想用\ 276e替换它.因此,计划显示文本的样子.