pseudo-element

问题 I thought this would be easy using the ::first-letter pseudo element but it doesn't work! I have <p>* Required Fields</p> and I want the * to be red! Any ideas? Note I can't change the html. http://jsfiddle.net/3ducS/ 回答1: I almost have a solution (well, you might see it as a solution) and it works with your HTML : p::before { content:'*'; position:absolute; color: red; text-shadow: 0 0 1px red; } Demonstration I launched a virtual machine to test on IE, it looks good : 来源： https:/

问题 Examine this code: HTML <h1 class="one">Sometext over here</h1> <input type="text" placeholder="E-mail" class="two"> CSS .one { display: block; float: left; width: 450px; height: 60px; padding-top: 25px; color: #ffffff; font-size:34px; font-weight: 800; } .one:after { clear: both; } .two { margin: 0 auto; font-size: 150%; width: 200px; height: 20px; } JSfiddle Why is the clear both with the after element not working in this example above? while the clearing with <div style="clear:both"></div>

问题 Take a look at these photos JSFiddle link at the bottom firefox: chrome: they are both the same element taken from chrome and firefox and as you can see the one from firefox has some space around it's top and left side but the one from chrome doesn't now, There is no margin or anything that's causing this and it works fine in any other browser except for firefox. the important styles for the main element is float: left; height: 30px; line-height: 30px; margin: 12.5px 0; and for the Pseudo

问题 Adding what seems to be an innocuous class to an element having a class containing :first-letter causes the first letter, under some circumstances, to be rendered incorrectly. An element originally has class "unindent", and then class "menuitemon" is added. The fiddle http://jsfiddle.net/pgf3reyt/4/ shows this working on one element, and not working on another. Works OK in Firefox. p.unindent { color: #555555; background-color: #e6e6e6; border-bottom: 1px solid #d3d3d3; border-left: 1px solid

问题 see: http://jsfiddle.net/Kq2PY/ the div is relative with z-index 5, and the :after thing is absolute with z-index 2. So shouldn't :after be behind the div? 回答1: You would have to give pseudo elements a negative z-index to get it to go behind it's parent, plus remove the z-index on the parent. http://jsfiddle.net/jklm313/Kq2PY/4/ 来源： https://stackoverflow.com/questions/12463061/z-index-not-working-on-pseudo-elements

问题 I am wondering whether the :before and :after pseudo-elements can inherit the height from parent using the inherit value, without the actual element doing so? 回答1: No. The only way that pseudo-elements can inherit values from the parent of their generating element is when the generating element itself is also inheriting from its parent. This is because inheritance occurs from a parent to a child, one level at a time. For inheritance to work across several levels of descendants, every

问题 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! 回答1: 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

问题 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

问题 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? 回答1: This is the easiest way and the way I do it: Inspect the element you want to add the ::before or :

问题 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. 回答1: Using the content property generates (non-exposed) markup functionally equvialent to an svg in an <img> element. You cannot apply style