CSS Pseudo-elements

From http://www.w3schools.com (Copyright Refsnes Data)

# CSS Pseudo-elements

CSS pseudo-elements are used to add special effects to some selectors.

## Examples

Make the first letter special
This example demonstrates how to add a special effect to the first letter of a text.

Make the first line special
This example demonstrates how to add a special effect to the first line of a text.

Make the first letter and first line special
This example demonstrates how to add a special effect to the first letter and the first line of a text.

Use :before to insert some content before the content of an element (Does not work in IE)
This example demonstrates how to use the :before pseudo-element to insert an image before an element.

Use :after to insert some content after the content of an element (Does not work in IE)
This example demonstrates how to use the :after pseudo-element to insert an image after an element.

## 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: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:

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

## 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:first-letter {color:#ff0000;font-size:xx-large}

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

The output could be something like this:

The 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

## 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:first-letter {color:#ff0000;font-size:xx-large}
    p:first-line {color:#0000ff}

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

The output could be something like this:

The 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 the content of an element.

The style below will play a sound before each occurrence of an <h1> element:

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

## CSS2 - The :after Pseudo-element

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

The style below will play a sound after each occurrence of an <h1> element:

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

## Pseudo-elements

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

Pseudo-element | Purpose | IE | F | N | W3C
--- | --- | --- | --- | --- | ---
:first-letter | Adds special style to the first letter of a text | 5 | 1 | 8 | 1
:first-line | Adds special style to the first line of a text | 5 | 1 | 8 | 1
:before | Inserts some content before the content of an element |  | 1.5 | 8 | 2
:after | Inserts some content after the content of an element |  | 1.5 | 8 | 2

From http://www.w3schools.com (Copyright Refsnes Data)