6

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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Only Bolivian Here
  • 35,719
  • 63
  • 161
  • 257
  • 1
    "What is a pseudo element?" [answers](http://bit.ly/19BalsR) – Barnee Aug 02 '13 at 06:50
  • Also worth knowing - [What is the difference between a pseudo-class and a pseudo-element in CSS?](https://stackoverflow.com/q/8069973/465053) – RBT Jan 10 '19 at 06:36

2 Answers2

10

Pseudo-elements are CSS selectors that manipulate parts of an element in a special way.

They include:

  • :first-line
  • :before
  • :after

Application

Pseudo elements are applied like so

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

Note: the : followed by the selector is how pseudo elements are denoted in CSS1 and CSS2. In CSS3, the double colon is used (::) to distinguish them from pseudo-classes.

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

Support

Support is decent for a number of browsers, with older versions of IE notably poor with support. QuirksMode has a compatibility table (a bit out-of-date but still useful): http://www.quirksmode.org/css/contents.html#t15

Cool Tricks

Pseudo elements can do some cool things, including

  1. show the URLs of links in printed docs
  2. fake a float:center;

See more here: http://css-tricks.com/9516-pseudo-element-roundup/

With jQuery

jQuery has a number of unique selectors that enhance and expand on the native CSS group:

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

Note: you can use jQuery to force older browsers to adopt certain rules. For example, IE6 will ignore :last-child. Using jQuery can force IE6 to apply that style.

The Spec

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

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Jason Gennaro
  • 34,535
  • 8
  • 65
  • 86
2

Its not an element in the dom. Its something you can select with a selector, notably after a :.

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

Daniel A. White
  • 187,200
  • 47
  • 362
  • 445