pseudo-element

问题 I am using :after and :before css pseudo elements and it is working fine in IE8 , and all modern browsers but it is not working fine in IE7 . Are there known hacks to work around this in IE7 ? 回答1: with any pure CSS hack it's not possible. Use IE8.js http://code.google.com/p/ie7-js/ It has support for this. http://ie7-js.googlecode.com/svn/test/index.html test page also there after - http://ie7-js.googlecode.com/svn/test/after.html before - http://ie7-js.googlecode.com/svn/test/before.html

问题 Is it possible to change a CSS pseudo-element style via JavaScript? For example, I want to dynamically set the color of the scrollbar like so: document.querySelector(\"#editor::-webkit-scrollbar-thumb:vertical\").style.background = localStorage.getItem(\"Color\"); and I also want to be able to tell the scrollbar to hide like so: document.querySelector(\"#editor::-webkit-scrollbar\").style.visibility = \"hidden\"; Both of these scripts, however, return: Uncaught TypeError: Cannot read property

问题 This question already has answers here : How to get a child element to show behind (lower z-index) than its parent? (4 answers) Why can't an element with a z-index value cover its child? (4 answers) Closed last month . I am trying to style a element with the :after pseudo element CSS selector #element { position: relative; z-index: 1; } #element::after { position:relative; z-index: 0; content: \" \"; position: absolute; width: 100px; height: 100px; } It seems like the ::after element can not

问题 I\'m having trouble understanding the behavior of the CSS :after property. According to the spec (here and here): As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element\'s document tree content. This doesn\'t seem to place restrictions on which elements can have a :after (or :before ) property. However, it seems to only work with specific elements... <p> works, <img> doesn\'t, <input> doesn\'t, <table> does. I\'m could test

问题 Given the following scenario, why does the :after selector require a content property to function? .test { width: 20px; height: 20px; background: blue; position:relative; } .test:after { width: 20px; height: 20px; background: red; display: block; position: absolute; top: 0px; left: 20px; } <div class=\"test\"></div> Notice how you do not see the pseudo element until you specify the content property: .test { width: 20px; height: 20px; background: blue; position:relative; } .test:after { width:

问题 I am trying to use the :after CSS pseudo-element on an input field, but it does not work. If I use it with a span , it works OK. <style type=\"text/css\"> .mystyle:after {content:url(smiley.gif);} .mystyle {color:red;} </style> This works (puts the smiley after \"buu!\" and before \"some more\") <span class=\"mystyle\">buuu!</span>a some more This does not work - it only colors someValue in red, but there is no smiley. <input class=\"mystyle\" type=\"text\" value=\"someValue\"> What am I

问题 Is there any way to select/manipulate CSS pseudo-elements such as ::before and ::after (and the old version with one semi-colon) using jQuery? For example, my stylesheet has the following rule: .span::after{ content:\'foo\' } How can I change \'foo\' to \'bar\' using jQuery? 回答1: You could also pass the content to the pseudo element with a data attribute and then use jQuery to manipulate that: In HTML: <span>foo</span> In jQuery: $('span').hover(function(){ $(this).attr('data-content','bar');