在CSS中使用display：none在元素上，但保留它的：after [英] 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?

p>

I tried

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

我试图让CSS用一个星号替换一个span的内容，而不引入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 = "*";​

演示< a>

Demo

但是，如果你真的想使用CSS， text-indent 隐藏文本和相对定位以显示星号：

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在元素上，但保留它的：after的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！