CSS Advanced tutorial 14 : CSS Pseudo Elements

There are four pseudo elements. These are :

• First letters 
• First lines
• Before 
• after

First letter :
The first-letter pseudo element applies to the first letter of an element. for example


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


This will create drop caps for paragraph.


First line :
The first-line pseudo element applies to the top line of an element. For example


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


This will create a bold first-line for paragraph.


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(imgname). For example


blockquote:before {
content: open-quote;
}


blockquote:after {
content: close-quote;
}


li:before {
content: "Dragon : "
}


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

See Also