The :before and :after will not work on a text-area (nor any element that cannot contain another element, such as img or input), because the generated content of the pseudo-element gets placed within the element but before or after that element’s content, and acts itself as an element. The pseudo-element does not get placed before … Read more
The idea of nesting ::before and ::after pseudo-elements has been proposed; see this section of the Generated and Replaced Content module. However, that module has been abandoned pending a complete rewrite, so I wouldn’t hold my breath on this document ever receiving implementation until it’s republished. And even then, whether nesting content pseudo-elements will still … Read more
To use encoded Unicode characters in content you need to provide either the characters themselves (as you do), or their UTF-8 escape sequences instead of HTML entities: a.up:after { content: ” \2193″; } a.down:after { content: ” \2191″; }
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 Edit after 1st comment You can just keep this js for IE6 and 7. other browser will not read it. <!–[if lt IE 8]> <script src=”http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js”></script> <![endif]–> And … Read more
Here is a compromise that I have used. http://jsfiddle.net/pht9d295/3/ <div class=”select-wrapper”> <select> <option>United Kingdom</option> <option>Canada</option> <option>United States</option> </select> </div> And CSS body { background-color: #f6f6f6; padding: 10px; } .select-wrapper { background-color: #FFF; display: inline-block; position: relative; } .select-wrapper:after { content:”\f078″; font-family:’FontAwesome’; position: absolute; top: 13px; right: 10px; z-index: 5; pointer-events: none; } select { padding: … Read more
If you use display: inline-block on the :after pseudo, the text-decoration declaration will work. Tested in Chrome 25, Firefox 19
No, inline SVG is treated as an image, and images are replaced elements which are not allowed to have generated content. Strictly speaking, I think it’s undefined. CSS 2.1 just talks about “images, embedded documents and applets” in general and The HTML standard defines it for images, but not SVG explicitly.
Was looking for a solution and found this thread. Now want to share my workaround: CSS element { pointer-events: none; } element::after { pointer-events: all; } JS element.addEventListener(‘click’, function() { … }); This works if you don’t need any pointer events on element. Check it in action.
As far as I can tell there is no other way than to override all properties. The styles are defined on the element, they won’t just disappear because of another selector that targets the element. If you only want to remove the pseudo element from the page you can do content: none. Added from comments … Read more
The issue is your use of absolute positioning & the method you’re using to try and center it. If you position an element absolutely, the ol’ margin: 0 auto; method won’t work to center the thing. I point you to an explanation as to why this is at the end of the question, but in … Read more