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

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

​

It's definitely possible. Use font-size: 0px instead of display: none:

#myspan {
    /* display: none; */
    font-size: 0px;
}

#myspan:after {
    /* display: inline; */
    font-size: 16px;
    content: "*"
}

A demo is here.

In this case you can only use px/pt for the display text font units.

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