xml - CSS show element attribute value, not element content -


i have elements pattern (xml, not html, css should still work):

<expan abbr="xx">yy</expan> 

sometimes want see "yy" in output, want see "xx". no problem when want see "yy" , not attribute value: leave is. no problem if want see both element content , attribute value: bit of css that:

      expan:after {content:attr(abbr);} 

will display <expan abbr="xx">yy</expan> "yyxx".

but: problem if want see attribute value , not element content -- is, if want see "xx". can use either css display or visibility hide element <expan>. hides everything, including :after pseudo-element. so, code:

      expan:after {content:attr(abbr);}        expan {display:none;} 

shows nothing @ all.

so, folk... help. seems obvious thing want do. of course, pretty manipulating dom javascript. various reasons, don't have option. i'd simple css. can i??

you'll have use kind of hack element still there pseudo element (:after) visible user. example of color. if know it's text, can set color transparent on main element, , set real color on pseudo. you'll still have blank space deal with, can fix position: relative on parent , position: absolute on pseudo element, because pseudo element child of main element. note text still there, see if highlight mouse. that's fixable too, ::selection, still copyable accident, , ::select available in modern browsers.

here demo showing mean: demo

edit: 1 should work text around it, you'll have increase width in order add more text: demo

works me in chrome , firefox.


Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -