Slide 5.25: CSS pseudo-element (cont.)

CSS Pseudo-Element (Cont.)

The :first-letter Pseudo-Element
The first-letter pseudo-element is used to add special style to the first letter of the text in a selector:


<html> <head> <style type="text/css"> p:first-letter { color:#ff0000; font-size:xx-large; } </style> </head> <body bgcolor="#EDF3FE"> <p>You can use the :first-letter pseudo-element to add a special effect to the first character of a text!</p> </body> </html>

The first-letter pseudo-element can only be used with block-level elements. The properties below apply to the first-letter pseudo-element:

font properties
color properties
background properties
margin properties

padding properties
border properties
text-decoration
vertical-align

text-transform
line-height
float
clear

Pseudo-Element and CSS Classes
Pseudo-elements can be combined with CSS classes. The example below will make the first letter of all paragraphs with class="article" red.


<html> <head> <style type="text/css"> p.article:first-letter { color:#ff0000 } </style> </head> <body bgcolor="#EDF3FE"> <p class="article">A paragraph in an article</p> </body> </html>

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


<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> <p><b>Note:</b> Internet Explorer 8 (and higher) supports the content property if a !DOCTYPE is specified.</p> </body> </html>