5

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??

4

2 に答える 2

2

部分的な解決策の 1 つは、expanfont-sizeを 0 に設定し、:beforeコンテンツfont-sizeを目的のサイズに設定することです。

expan:before {
    content: attr(name);
    font-size: 15px;
}
expan {
    font-size: 0;
}

:before font-sizeを 100%に設定しようとしてもうまくいきませんでした。

于 2015-08-22T22:01:25.923 に答える