CSS Pseudo-elements

Pseudo-elements are used in CSS to add different effects to some selectors, or to a part of some selectors.

Examples

Make the first letter special
This example demonstrates how to add special style to the first letter in a text.

Make the first line special
This example demonstrates how to add special style to the first line in a text.

Syntax

The syntax of pseudo-elements:

selector:pseudo-element {property: value}

CSS classes can also be used with pseudo-elements:

selector.class:pseudo-element {property: value}

The first-line Pseudo-element

The "first-line" pseudo-element is used to add special styles to the first line of the text in a selector:

p {font-size: 12pt}
p:first-line {color: #0000FF font-variant: small-caps}

<p>Some text that ends up on two or more lines</p>

The output could be something like this:

In the example above the browser displays the first line formatted according to the "first-line" pseudo element. Where the browser breaks the line, depends on the size of the browser window.

Note: The "first-line" pseudo-element can only be used with block-level elements.

Note: The following properties applies to the "first-line" pseudo-element: 

• font properties
• color properties 
• background properties
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

Note: IE 4.01 and IE 5.0 do not support the "first-line" pseudo-element, but IE 5.5 does.

Note: NN 4.5 does not support the "first-line" pseudo-element.

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:

p {font-size: 12pt}
p:first-letter {font-size: 200%; float: left}

<p>The first words of an article.</p>

The output could be something like this:

Note: The "first-letter" pseudo-element can only be used with block-level elements.

Note: The following properties applies to the "first-letter" pseudo- element: 

• font properties
• color properties 
• background properties
• margin properties
• padding properties
• border properties
• text-decoration
• vertical-align (only if 'float' is 'none')
• text-transform
• line-height
• float
• clear

Note: IE 4.01 and IE 5.0 do not support the "first-letter" pseudo-element, but IE 5.5 does.

Note: NN 4.5 does not support the "first-letter" pseudo-element.

Pseudo-elements and CSS Classes

Pseudo-elements can be combined with CSS classes: 

p.article:first-letter {color: #FF0000}

<p class="article">A paragraph in an article</p>

The example above will make the first letter of all paragraphs with class="article" red.

Multiple Pseudo-elements

Several pseudo-elements can be combined:

p {font-size: 12pt}
p:first-letter {color: #FF0000; font-size: 200%}
p:first-line {color: #0000FF}

<p>The first words of an article</p>

The output could be something like this:

In the example above the first letter of the paragraph will be red with a font size of 24pt. The rest of the first line would be blue while the rest of the paragraph would be the default color.

CSS2 - The :before Pseudo-element

The ":before" pseudo-element can be used to insert some content before an element.

The style below will play a sound before each occurrence of a header one element.

CSS2 - The :after Pseudo-element

The ":after" pseudo-element can be used to insert some content after an element.

The style below will play a sound after each occurrence of a header one element.

Pseudo-elements

NN: Netscape, IE: Internet Explorer, W3C: Web Standard

Jump to: Top of Page or HOME or Printer friendly page

Search W3Schools:

What Others Say About Us

Does the world know about us? Check out these places:

Dogpile Alta Vista MSN Google Excite Lycos Yahoo Ask Jeeves

We Help You For Free. You Can Help Us!

• Tell your newsgroup or mailing list
• Link to us from your pages
• Help us correct errors and broken links
• Help us with spelling and grammar
• Validate the XHTML code of this page

W3Schools is for training only. We do not warrant its correctness or its fitness for use. The risk of using it remains entirely with the user. While using this site, you agree to have read and accepted our terms of use and privacy policy.

Copyright 1999-2002 by Refsnes Data. All Rights Reserved

How we converted to XHTML