What is a pseudo-element?

Question

I talk about this very beautiful example of how CSS can help you create nice glow effects on images.

http://jsfiddle.net/necolas/KbNq7/

This line from the example mentions:

Despite the fact that this method will have full effect in Firefox 4, other browsers will eventually catch up and apply the transition to the <Strong> pseudo-elements.

What is a pseudo-element?

Answer 1

Pseudo - elements are a CSS selector that specifically manipulates parts of an element.

They include:

• :first-line
• :before
• :after

Application

Pseudo-elements apply like this

 p:first-letter{ color:black; font-style:italic; } 

Note. : followed by a selector is how pseudo-elements are denoted in CSS1 and CSS2. CSS3 uses a double colon ( :: to distinguish them from pseudo-classes.

More details here: http://reference.sitepoint.com/css/pseudoelements

Support

Support is decent for multiple browsers, with older versions of IE being noticeably poor in support. QuirksMode has a compatibility table (a bit dated but still useful): http://www.quirksmode.org/css/contents.html#t15

Cool tricks

Pseudo-elements can do some interesting things, including

• show link URLs in printed documents
• fake a float:center;

More details here: http://css-tricks.com/9516-pseudo-element-roundup/

With jQuery

jQuery has a number of unique selectors that expand and expand their own CSS group:

http://api.jquery.com/category/selectors/

Note. you can use jQuery to force old browsers to accept certain rules. For example, IE6 ignores :last-child . Using jQuery can force IE6 to apply this style.

Spec

http://www.w3.org/TR/CSS2/selector.html#pseudo-element-selectors

Answer 2

This is not an element in dom. It can be selected using the selector, especially after :

http://www.htmldog.com/guides/cssadvanced/pseudoelements/