Pseudo-Elements

Pseudo-elements are very similar to pseudo-classes, in that they give you additional control to the element that you are working with. Some of the things you can do with the pseudo- elements in CSS, is make the first character of text larger than the other letters of the same text.

First-Letter

The first-letter pseudo-element allows you to manipulate the look of the first character in a string of text. You can apply a different color, make the text larger, or even use a different font for the character.

First-Line

This pseudo-element is similar to the first-letter element, except it effects the first line of text. The first line will change also if the user has a different size resolution than you have. If you really want the first line to stand out, it would be better to use the span element and apply a style to it.

Before

Before pseudo-element will change the area before an element. If you want to add an image before an element, then you can use the before pseudo..

After

After works the same as before, but comes after an element.

Both before and after pseudo-elements do not work with Internet Explorer according to the W3C School website. Firefox support both elements after version 1.5. The first-letter, and first-line can not be used in any version of Internet Explorer before version five, but are support on all version of FireFox after version 1. All four are supported on Netscape 8 or later.