In CSS use "display:none" on the element, but keep its ":after"

Question

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

I tried

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

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

Answer 1

No, it is not possible.

Pseudo elements are rendered like children:

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

And display:none hides the element including all children.

EDIT 1

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

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

Demo

EDIT 2

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

Demo

​

Answer 2

I think a very easy approach to doing this is to exploit the visibility property. But note that a "hidden" element still takes up the space. But if you are okay with that, just make make the parent element "hidden" and pseudo element "visible":

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

Once you have the visibility taken care of, feel free to play around with the position so that excess space is avoided.

Something like,

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