css tutorial

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

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 a special style to the first line of a text.

In the following example the browser formats the first line of text in a p element according to the style in the “first-line” pseudo-element (where the browser breaks the line, depends on the size of the browser window):

p:first-line
{
color:#ff0000;
font-variant:small-caps;
}

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 a special style to the first letter of a text:
p:first-letter
{
color:#ff0000;
font-size:xx-large;
} 

Multiple Pseudo-elements

Several pseudo-elements 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:

CSS – The :before Pseudo-element

The “:before” pseudo-element can be used to insert some content before the content of an element.

The following example inserts an image before each <h1> element:

CSS – The :after Pseudo-element

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

The following example inserts an image after each <h1> element: