Mywebdunia's Blog

The following are some of the Pseudo elements that can be used along with the css which adds special effects.

1. first-line ::- Adds special style to the first line of a text.
2. first-letter ::- Adds special style to the first letter of a text.
3. fist-child ::- Adds special style to the first child of the some other element.
4. last-child ::- Adds special style to the last child of the some other element.
5. before ::- Inserts some content before the content of an element.
6. after ::- Inserts some content after the content of an element.

Down below are the examples for the same..
1. first-line
p:first-line {color:#666666}
here the color of the first line of the paragraph is changed to #666666.

2. first-letter
p:first-letter {color:#ff0000;font-size:xx-large}
here the first letter of the paragraph will have the color as red and the text size will be large.

3. first-child
p:first-child {color:#ff0000}
here the first paragraph text color will be #ff0000 and rest will be default.

4. last-child
p:last-child {color:#ff0000}
here the last paragraph text color will be #ff0000 and rest will be default.

5. before
h1:before{content: url(beep.wav)}
The above style will play a sound before each occurrence of an
<h1>element.

6. after
h1:after{content: url(beep.wav)}
The above style will play a sound after each occurrence of an

<h1>element.

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
1. first-line ::- IE-5, F-1, N-8
2. first-letter ::- IE-5, F-1, N-8
3. first-child ::- F-1, N-7
4. last-child ::- F-1, N-7
5. before ::- F-1.5, N-8
6 after ::- F-1.5, N-8