CSS Pseudo-elements

Home >> CSS >> CSS Pseudo-elements

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}

Some text that ends up on two or more lines

The output could be something like this:

Some text that ends up on two or more lines

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 apply 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 does 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}

The first words of an article.

The output could be something like this:

___ | he first | words of an article

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

Note: The following properties apply 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 does 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}

A paragraph in an article

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}

The first words of an article

The output could be something like this:

___ | he first | words of an article.

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 occurence of a header one element.

h1:before { content: url(beep.wav) }

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 occurence of a header one element.

h1:after { content: url(beep.wav) }

Pseudo-elements

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

Pseudo-elements NN IE W3C Purpose

first-letter 5.5 CSS1 Adds special style to the first letter of a text

first-line 5.5 CSS1 Adds special style to the first line of a text

:before CSS2 Inserts some content before an element

:after CSS2 Inserts some content after an element

Open Directory Site CSS Tutorials