Slide 5.26: CSS pseudo-element (cont.)

CSS Pseudo-Element (Cont.)

Multiple Pseudo-Element
Several pseudo-element can also be combined. In the following example, the first letter of a paragraph will be red, in an xx-large font size. The rest of the first line will be blue, and in small-caps. The rest of the paragraph will be the default font size and color:


<html> <head> <style type="text/css"> p:first-letter { color:#ff0000; font-size:xx-large; } p:first-line { color:#0000ff; font-variant:small-caps; } </style> </head> <body bgcolor="#EDF3FE"> <p>You can combine the :first-letter and :first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p> </body> </html>

CSS—The :before and :after Pseudo-Element
The :before/:after pseudo-element can be used to insert some content before/after an element. The following example inserts an image before each <h1> element:


<html> <head> <style type="text/css"> h1:before {content:url(http://undcemcs01.und.edu/~wen.chen.hu/figure/smiley.gif);} </style> </head> <body bgcolor="#EDF3FE"> <h1>This is a heading</h1> <p>The :before pseudo-element inserts content before an element.</p> <h1>This is a heading</h1> </body> </html>

Pseudo-Element
The “CSS” column indicates in which CSS version the property is defined (CSS1 or CSS2).

Pseudo-element	Purpose	CSS
:first-letter	Adds special style to the first letter of a text	1
:first-line	Adds special style to the first line of a text	1
:before	Inserts some content before an element	2
:after	Inserts some content after an element	2

Demonstration
The following demonstration shows how the script of HTML and CSS is displayed on the Web:


<html> <head> <style type="text/css"> h1:after { content:url(http://undcemcs01.und.edu/~wen.chen.hu/figure/smiley.gif); } </style> </head> <body bgcolor="#EDF3FE"> <h1>This is a heading</h1> <p>The :after pseudo-element inserts content after an element.</p> <h1>This is a heading</h1> <p><b>Note:</b> Internet Explorer 8 (and higher) supports the content property if a !DOCTYPE is specified.</p> </body> </html>