pseudo-element | 易学教程

What is the difference between pseudo-classes and pseudo-elements?

阅读更多关于 What is the difference between pseudo-classes and pseudo-elements?

What is the different between div::after {} and div:after {} ? When do we have to use :: over : ? Double colon and single-colon notation is to distinguish between pseudo-classes and pseudo-elements. What is the actual meaning of the above statement? Bas van Dijk From https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements Pseudo-class : A CSS pseudo-class is a keyword, preceded by a colon (:), added to the end of selectors to specify you want to style the selected elements, and only when they are in certain state . For example, you might want

Pseudo elements and SELECT tag

阅读更多关于 Pseudo elements and SELECT tag

Does the select tag allows to use the :after selector in order to create a pseudo element after it? I've tried on Chrome, Safari and Firefox on Mac and it doesn't seem to work. Here is a compromise that I have used. http://jsfiddle.net/pht9d295/3/ <div class="select-wrapper"> <select> <option>United Kingdom</option> <option>Canada</option> <option>United States</option> </select> </div> And CSS body { background-color: #f6f6f6; padding: 10px; } .select-wrapper { background-color: #FFF; display: inline-block; position: relative; } .select-wrapper:after { content:"\f078"; font-family:

What happens if multiple classes of the same element define a :before pseudo-element? [duplicate]

阅读更多关于 What happens if multiple classes of the same element define a :before pseudo-element? [duplicate]

问题 This question already has an answer here: Can I have multiple :before pseudo-elements for the same element? 2 answers I'm using :before to tag links to user profiles with a symbol to characterise the user, examples include "administrator", "inactive user", "newbie" and so on. The thing is, it's possible for more than one to apply. So what happens if more than one class on the link define a :before pseudo-element with content ? Does the most specific selector override the first? Or do they

How to make a hover effect for pseudo elements?

阅读更多关于 How to make a hover effect for pseudo elements?

I have a this setup: <div id="button">Button</div> and this for CSS: #button { color: #fff; display: block; height: 25px; margin: 0 10px; padding: 10px; text-indent: 20px; width: 12%; } #button:before { background-color: blue; content: ""; display: block; height: 25px; width: 25px; } Is there a way to give the pseudo element a hover effect such as #button:before:hover {...} and is it also possible to get the pseudo element to hover in response to another element being hovered like so: #button:hover #button:before {...} ? CSS only would be nice, but also jQuery is fine too. James Montagne You

Applying text-decoration on css generated content in IE

阅读更多关于 Applying text-decoration on css generated content in IE

问题 It seems IE doesn't care for text-decoration: none; defined for a:before pseudo element (or pseudo class). Here is a JS Fiddle: http://jsfiddle.net/9N35f/ I'd expect the ">" to lose the underline. It does in FF, Chrome and Safari, but not in IE. Tested with IE10 and IE9. The question: Any workarounds that I could try to make the :before element lose the underline? Ideally in IE9+ Is there a bug report for this somewhere? Or is it actually by the standards? 回答1: IE seems to be in error here,

::after on :hover does not work in IE

阅读更多关于 ::after on :hover does not work in IE

问题 I have found some strange behaviour in Internet Explorer (IE10 and also when emulating all versions that support ::after ). When applying the pseudo-element to a hover state of an element ( .element:hover::after ) it does not work in IE, but it does in all other major browsers. http://jsfiddle.net/BramVanroy/9jpeZ/1/ #d1::after { /* Works in IE */ content: "no hover needed"; border: 1px solid blue; display: block; } #d2:hover::after { /* Does not work in IE */ content: "Y U NO WORK IN IE";

Is there a way to make IE8 honour opacity on an `:before` pseudo element?

阅读更多关于 Is there a way to make IE8 honour opacity on an `:before` pseudo element?

问题 I have this simple CSS... div:before { content: "G'day"; filter: alpha(opacity=40); -moz-opacity: .4; opacity: .4; } jsFiddle. The :before pseudo element has the correct opacity in Firefox 6. In IE8, the opacity is not applied. Typically, setting the opacity on the div works, but that isn't what I want. I tried adding display: block but it didn't help. Whilst I could workaround this, is there any trick to get IE8 to honour the opacity property on a :before (and :after for that matter) pseudo

CSS Transitions with :before and :after pseudo elements

阅读更多关于 CSS Transitions with :before and :after pseudo elements

问题 Can't seem to animate pseudo elements with -webkit-transition. The fiddle below shows what I mean when run in Chrome/Safari, I guess this isn't supported right now? http://jsfiddle.net/4rnsx/130/ 回答1: Fixed in Google Chrome on January 3rd, 2013. By now (I do update this list) it's supported in: FireFox 4.0 and above Chrome 26 and above IE 10 and above Waiting for Safari and Chrome for Android to pull these updates. You can test it yourself in your browser, or See the browser support table.

Possible to make a:after/before pseudo elements clickable as part of the link?

阅读更多关于 Possible to make a:after/before pseudo elements clickable as part of the link?

问题 pseudo elements a:after a:before allow you to add text that appears to be part of the link. However, I can't seem to figure out a way to make that portion clickable as part of the link. For example the following css shows the url afterward: a:after { content: " (" attr(href) ")"; } ...but it will not be clickable. Anyone get around this without changing underlying HTML? Edit: I am using chrome 13.0.782.107. It turns out it's a bug. (Thanks Sean) 回答1: It looks like you have discovered a bug in

CSS First Letter Highlighting

阅读更多关于 CSS First Letter Highlighting

I understand that with CSS formatting the first letter of each paragraph is possible via: p:first-letter { font-size:20px; } However upon using this code it is impossible to highlight/select these "First Letters" from the web browser, is there a way to amend this? Edit - It is possible to select the text, however it isn't shown visually, how can I change this? This is a bug in Chrome/ium/WebKit: https://code.google.com/p/chromium/issues/detail?id=17528 Right, it is not visually selected but in the background it is. If I select and copy and then paste it, I get "Hello" so this just might be a