If you're new here, you may want to subscribe to my RSS feed. So that you can read the latest updates about Web2.0 tools, Making Money Online, Tips in SEO, Ajax and many more. Thanks for visiting ProgramimiCOM!

Pseudo elements suck on to selectors much like pseudo classes, taking the form of selector:pseudoelement { property: value; }. There are four of the suckers.

First letters and First lines

The first-letter pseudo element applies to the first letter of an element and first-line to the top line of an element. You could, for examples create drop caps and a bold first-line for paragraphs like this:

p:first-letter {
	font-size: 3em;
	float: left;
}

p:first-line {
	font-weight: bold;
}

Before and after

The before and after pseudo elements are used in conjunction with the content property to place content either side of an element without touching the HTML.

The value of the content property can be open-quote, close-quote, no-open-quote, no-close-quote, any string enclosed in quotation marks or any image using url(imagename).

blockquote:before {
	content: open-quote;
}

blockquote:after {
	content: close-quote;
}

li:before {
	content: “POW: “
}

p:before {
	content: url(images/jam.jpg)
}

Sounds great, dunnit? Well, as with so many things (-sigh-), most users won’t be able to see the before or after effects because IE just can’t be bothered with them. Lazy lazy lazy.