CSS show element attribute value, not element content - css

Question

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.
So, good folk... help. This seems a very obvious thing to want to do. Of course, 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??

Answer 1

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.

Answer 2

One partial solution is to set the expan font-size to 0 and the :before content font-size to the desired size:
expan:before {
content: attr(name);
font-size: 15px;
}
expan {
font-size: 0;
}
Trying to set the :before font-size to 100% did not work.

Answer 3

You can only set the 'content:' attribute on ::before and ::after psuedo-elements.
But what you can do is just provide both your texts in two separate attributes, like this:
<div long-text="This is very long text" short-text="Short text">
<!-- this part is empty -->
</div>
Then your CSS can switch between them like this:
.AltText::before { content:attr(long-text); }
#media screen and (max-width:1200px) {
#HeaderTabContainer .AltText::before { content:attr(short-text); }
}
Or you could use a third attribute to toggle between them.