pseudo-element

Possible Duplicate: Adding pseudo-elements after pseudo-elements I'd like to apply two css ::after pseudo-elements to a single DOM element, each with a different colour. (Yes, I could wrap the DOM element in another DOM element and give each one and ::after pseudo-element, but my preference is cleaner html.) I doubt it's possible, but wonder if someone can tell me better. I especially doubt the possibility of chaining ::after pseudo-elements together so that one ::after pertains to another, which pertains to a DOM element, but if anyone knows how to make that happen, please do tell. You can

I have two CSS rules following each other: .some td:first-child:before { content:url('path/to/image.png')" " ; } .some .other:before { content:url('path/to/image2.png')" " ; } Here's the HTML snippet: <table class="some"> <tr> <td class="other">Text goes here</td> <td>Some more text.</td> </tr> </table> They're both supposed to be applied to the same table cell. The one without the class is meant as a fallback. But for some reason, it's always choosing the first rule over the second. I know the 2nd one works, since it will be used if i disable the first one in Firebug. What am I missing here?

I know that the :before , and :after pseudo elements are not supported in empty elements, but what about these: <select> <option> <textarea> <button> A list would be nice! Thanks guys! I put together a list of every HTML element. Some aren't even legal where they're used... but it still seems to work. demo If it says "it works" in green letters, that element is supported. 来源： https://stackoverflow.com/questions/8621127/list-of-html-elements-that-support-the-css-before-and-after-pseudo-elements

This question already has an answer here: Why do the :before and :after pseudo-elements require a 'content' property? 4 answers I want to add a help logo at the end of some form fields which opens a tooltip. Everything is working, but the .helptip icon ( http://img1.wsimg.com/shared/img/1/small-help-icon.gif ) is coming on the left(merged) with the text. I actually want in on the right of span text, so I did .help-tip:after. But then nothing shows up at all. Can you spot what's wrong? <div class="advancedSearchFormSelectField fclear"> <span id="view_format_mis" class="advancedSearchFormlabel

I can add a regular style rule via the + sign (New Style Rule) but I can't add one under the "Pseudo ::before Element" or "Pseudo ::after Element" sections of the Style Inspector. If I try to add the ::before or ::after element into the HTML via "Edit as HTML", it comes out as text. My workaround is to add <span class="pseudo_before"></span> and then style that. Am I missing something? This is the easiest way and the way I do it: Inspect the element you want to add the ::before or ::after to by right clicking it and going to "Inspect Element". Now in the Developer Tools Console, click on the

Example use (what I want) div::after { content: var(--mouse-x) ' / ' var(--mouse-y); } Test case showing it NOT working: CodePen: CSS Variables in Pseudo Element's "content:" Property (a test case) by Jase Smith document.addEventListener('mousemove', (e) => { document.documentElement.style.setProperty('--mouse-x', e.clientX) document.documentElement.style.setProperty('--mouse-y', e.clientY) // output for explanation text document.querySelector('.x').innerHTML = e.clientX document.querySelector('.y').innerHTML = e.clientY }) /* what I want!! */ div::after { content: var(--mouse-x, 245)" / " var

I have a SVG graphic put like this: a::before { content: url(filename.svg); } When I hover over the tag, I really want the SVG to change the fill color, without loading a new SVG file, as I have now: a:hover::before { content: url(filename_white.svg); } Is this possible to achieve using JavaScript, jQuery or just pure CSS that I am not aware of? Thanks. Erik Dahlström Using the content property generates (non-exposed) markup functionally equvialent to an svg in an <img> element. You cannot apply style to elements inside the svg document because: styles are not allowed to cascade across