pseudo-element

When statically positioned, the ::before pseudo-element stacks (z-index) before the child's content, but after the child's background. Can anyone explain why or even how this is happening or if this is an issue that all major browsers have? <style> div { background-color:yellow; width:400px; } div::before { background-color:red; content:"div::before"; } div::after { background-color:green; content:"div::after"; } div p { background-color:blue; color:white; margin:-15px 0; padding:0; } </style> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed tellus sed tellus

I can have CSS display the ID for an element by using generated content, like this: <style> h2:hover:after { color: grey; content: "#" attr(id); float: right; font-size: smaller; font-weight: normal; } </style> <h2 id="my-id">My ID</h2> <p>Pellentesque habitant morbi tristique senectus et netus et.</p> How can I make that generated content ("#my-id") selectable so that the user can highlight and copy it? You can't make a pseudo-element selectable, as it doesn't exist in the DOM. 5.10 Pseudo-elements and pseudo-classes Neither pseudo-elements nor pseudo-classes appear in the document source or

On this MS compatibility table it says, IE9 does not support pseudo-elements ::before and ::after , but when I try it seems it does... see JSBin Am I doing something wrong? I thought ::before and ::after would be nice tools to hide stuff from IE9, when in fact, they don't. The CSS2 pseudo-elements :before and :after , with the traditional single-colon notation, are supported by IE8 and later. They are not new to CSS3. The double-colon notation, on the other hand, is new to CSS3 . IE9 does support this new notation for ::before and ::after , and likewise for the CSS1 pseudo-elements ::first

I'm trying to come up with some good default styling for <input> s in HTML5 and tried the following: input::after { display: inline; } input:valid::after { content: ' ✓ '; color: #ddf0dd; } input:invalid::after { content: ' ✗ '; color: #f0dddd; } Alas, the ::after content never shows up. It's not a problem with double- versus single colons for the pseudo-elements; I've tried both. It's also not a problem with having a pseudo-element and a pseudo-class; I've tried it without the :valid and :invalid . I get the same behavior in Chrome, Safari, and Firefox (Firefox doesn't have the :valid and

I've created a 'header' element with a before-pseudo element. the pseudeo element must be behind the parent element. Everything works great till the moment I give my 'header' a z-index. What I want: The yellow 'header' on the foreground, the red pseudo-element in the background and a simple z-index of 30 on the yellow 'header' element. header { background: yellow; position:relative; height: 100px; width: 100px; z-index:30; /*This is the problem*/ } header::before { content:"Hide you behind!"; background: red; position:absolute; height: 100px; width: 100px; top:25px; left:25px; z-index:-1; }

Update Thanks porneL for pointing out the relation between generated content and replaced elements. I found this article which deals with this very topic: http://red-team-design.com/css-generated-content-replaced-elements/ Interestingly enough, a W3C document titled "CSS3 Generated and Replaced Content Module" (from 11 years ago!) defines the pseudo-element :outside , which could offer a solution to using generated content with replaced elements, by placing the generated content outside the replaced element, instead of trying to append it inside. Original question Is there a way to style an