I have elements with this pattern (XML, not HTML, but CSS should still work):
<expan abbr="XX">YY</expan>
Sometimes I want to see "YY" in the output, sometimes I want to see "XX". No problem when I want to see "YY" and not the attribute value: just leave it as is. No problem if I want to see BOTH the element content and the attribute value: this bit of CSS does that:
expan:after {content:attr(abbr);}
will display <expan abbr="XX">YY</expan> as "YYXX".
But: problem if I want to see the attribute value and NOT the element content -- that is, if I want to see just "XX". I can use either CSS display or visibility to hide the element <expan>. But it hides EVERYTHING, including the :after pseudo-element. So, this code:
expan:after {content:attr(abbr);}
expan {display:none;}
Shows nothing at all.
I could do it pretty easily manipulating the DOM with JavaScript, but for various reasons, I don't have that option. I'd like to do it with simple CSS. Can I?
You'll have to use some kind of hack where the element is still there but only the pseudo element (:after) is visible to the user. An example of this would be color. If you know it's only text, then you can set the color to transparent on the main element, and set it to a real color on the pseudo. You'll still have a blank space to deal with, but you can fix that with position: relative on the parent and position: absolute on the pseudo element, because the pseudo element is a child of the main element. note that the text is still there, but you only see it if you highlight it with the mouse. That's fixable too, with ::selection, but it would still be copyable by accident, and ::select is only available in modern browsers.
Here is a demo showing what I mean: DEMO
EDIT: This one should work with text around it, but you'll have to increase the width in order to add more text: DEMO
Works for me in Chrome and Firefox.