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/ 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://stackoverflow.com/questions/17835638/how-to-color-the-asterix-first-character-in-a-p-tag

CSS Scoping says The descendants of a shadow host must not generate boxes in the formatting tree. Instead, the contents of the active shadow tree generate boxes as if they were the contents of the element instead. CSS Pseudo-Elements describes ::before and ::after as these pseudo-elements generate boxes as if they were immediate children of their originating element So which of these is true? First, all the contents of the shadow host (not including ::before and ::after ) are replaced by the contents of the active shadow tree. And then, ::before and ::after generate boxes in the shadow host.

This question already has answers here : Why do the :before and :after pseudo-elements require a 'content' property? (4 answers) I got http://jsfiddle.net/8p2Wx/2/ from a previous question I asked and I see these lines: .cf:before, .cf:after { content:""; display:table; } .cf:after { clear:both; } If I take away content:"" , it ruins the effect, and I don't understand why it's necessary. Why is it needed to add an empty content to :after and :before pseudo-elements? You cannot style generated content without defining what that content should be. If you don’t really need any content, just an

My goal is to have a div with any background, which then uses a pseudo element to create a transparent white overlay, thus "lightening" the background of the div. The "overlay" must be UNDER the contents of the div, though. So, in the following example: <div class="container"> <div class="content"> <h1>Hello, World</h1> </div> </div> .container { background-color: red; width: 500px; height: 500px; position: relative; } .content { background-color: blue; width: 250px; } .container::before { content:""; display: block; height: 100%; position: absolute; top: 0; left: 0; width: 100%; z-index: 1;

I know that has been asked before, but I find no clean way of overriding this CSS: .ui-input-search:after { content: ""; height: 18px; left: 0.3125em; margin-top: -9px; opacity: 0.5; position: absolute; top: 50%; width: 18px; } I need to leave ui-input-search on the element, but can add my own class, like: .ui-input-search-no-pseudo:after { content: ""; } Question : Is there an easy way to remove "pseudo-css" without having to overwrite the CSS line by line? Thanks! Sacha 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

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-element ::before float: left; display: block; content: '\F011'; height: 30px; line-height: 30px; margin: 0

In my other question What does "pseudo" mean in CSS? I got this answer: "A pseudo-element is something that acts like an element, but is not an element". What is it that makes pseudo-element not an element? A pseudo element is not in the dom. That is what makes it not an element. It is an element created by CSS. Pseudo elements cannot be seen or manipulated by various technologies. For example, many JavaScript methods don't work for pseudo elements. That is why it is "not an element." To explain further: Elements are items in the dom. For example, div, p, and span are all html elements. They