pseudo-element

问题 Long story short, I want to add an absolutely positioned pseudo element after another element, so I simply use the :after pseudo element in my stylesheet. This works like a charm, except in IE7. I should think that :after is supported in IE7, no? The clearfix hack used in Boilerplate works fine, so why not in my example? When I look at the CSS in the style inspector, it does seem to print it out, so it seems to me that it understands it, but I can't see the generated element nonetheless. Am I

问题 So here's what I have: <div class="overlay"> <p>text text</p> </div> <div class="overlay"> <p>text text text text text text</p> <p>text text text text text text</p> <p>text text text text text text</p> <p>text text text text text text</p> </div> What I want to do is this: whenever I rollover a div with the class overlay , I want a semi-transparent 5px x 5px image to overlay the div. The image would have to repeat to fill up the width and height of the div. What's the best way to do this? My

问题 Related to this question Changing CSS pseudo-element styles via JavaScript, is there any way using javascript that I can access a pseudo-element's style attributes? 回答1: It depends on the browser. I don't believe IE supports this in any way, but for FireFox and Webkit browsers, you can use the following: window.getComputedStyle(element, pseudo-selector); For example: window.getComputedStyle(document.body, ':before'); See: getComputedStyle 来源： https://stackoverflow.com/questions/13644399

问题 This question already has an answer here : What is it in a pseudo-element that makes the pseudo-element pseudo? (1 answer) Closed 2 years ago . When I read about CSS and HTML I cross the word pseudo-elements. I haven't found a good short explanation for what pseudo means. Could someone please explain this to me? 回答1: Supposed or purporting to be but not really so; false; not genuine: — https://en.oxforddictionaries.com/definition/pseudo- A pseudo-element is something that acts like an element

问题 I'm dissecting this very beautiful example of how CSS can help you create nice glow effects on images. http://jsfiddle.net/necolas/KbNq7/ This particular line from the example mentions: Although this method will only produce the full effect in Firefox 4, other browsers will eventually catch up and apply transitions to pseudo-elements . What is a pseudo-element? 回答1: Pseudo-elements are CSS selectors that manipulate parts of an element in a special way. They include: :first-line :before :after

问题 As you probably know, if you will to use :before and/or :after pseudoelements without setting text in it, you still have to declare content: ''; on them to make them visible. I just added the following to my base stylesheet : *:before, *:after { content: ''; } ...so I don't have to declare it anymore further. Apart from the fact the * selector is counter-performant, which I'm aware of (let's say the above is an example and I can find a better way to declare this, such as listing the tags

问题 As you probably know, if you will to use :before and/or :after pseudoelements without setting text in it, you still have to declare content: ''; on them to make them visible. I just added the following to my base stylesheet : *:before, *:after { content: ''; } ...so I don't have to declare it anymore further. Apart from the fact the * selector is counter-performant, which I'm aware of (let's say the above is an example and I can find a better way to declare this, such as listing the tags

问题 I want to make a menu where each item is separated with a ·. To achieve this I use menu li:before { content: "· "; } This is swell, but it generates a dot before the first item as well. Therefore, i would like to use :first-child pseudo-class as well. Can I do this? 回答1: Sure you can - http://jsfiddle.net/WQBxk/ p:before { content: "BEFORE "; display: block; } p:first-child:before { content: "1ST"; display: block } ​ The bad - it won't work in IE7 and below. Not because of the multiple pseudo

问题 I'm setting the selection background color via CSS: ::selection { background:#cc0000; color:#fff; } ::-moz-selection { background:#cc0000; color:#fff; } On most browsers when the focus is somewhere else (like an IFrame), the selection color will stay the same, e.g.: but on Firefox it won't: You can see this in action on jsFiddle here. How can I get Firefox to set the selection color in this case? Is this a bug? 回答1: How can I get Firefox to set the selection color in this case? Unfortunately,

问题 Please see http://jsfiddle.net/ZWw3Z/ <p>Text text text text text text text...</p> p { background-color: blue; } p:before { content: ''; position: absolute; width: 10px; height: 100%; background-color: red; } Essentially, the height of the pseudo element is too big. I want it to have the same height as the p element. How can I do that? 回答1: To future readers, the effect was to have a bar appear over text on the left-hand side. To accomplish this, the OP was using position: absolute; on the