CSS Advanced - Pseudo Elements

Complete CSS Tutorial

First Step - Beginner CSS	Second Step - Intermediate CSS	Third & Final Step - Advanced CSS
1. Applying CSS	1. Class and ID Selectors	1. Display
2. Selectors, Properties, and Values	2. Grouping and Nesting	2. Page Layout
3. Colors	3. Pseudo Classes	3. At-Rules
4. Text	4. Shorthand Properties	4. Pseudo Elements
5. Margins and Padding	5. Background-images	5. Specificity
6. Borders
7. Putting It All Together

Pseudo elements suck on to selectors much like pseudo classes, taking the form of selector:pseudoelement { property: value; }. There are four of the suckers.
Teach Yourself  by BH24 HTML Editor Tool!

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;
}

 

CSS Tutorial by BH24

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)
}

 Teach Yourself  by BH24 HTML Editor Tool!

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.