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
Post a Comment