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:

CSS classes can also be used with pseudo-elements:

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:

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

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

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

Multiple Pseudo-elements

Several pseudo-elements can be combined:

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.

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

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

Pseudo-elements

The "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).

Altova® MapForce®
Graphical XML Mapping Tool from the Developers of XMLSpy®

Need an easy way to get data into XML, or transform XML to another format? MapForce lets you map XML data to/from any combination of XML, database, flat file, Excel 2007, XBRL, or Web services data. Then it transforms data instantly or auto-generates royalty-free data integration code for recurrent conversions.

Download a free, fully functional 30-day trial to experience the following features: Easy-to-use, graphical data mapping interface Instant data transformation XSLT 1.0/2.0 and XQuery code generation Java, C#, and C++ code generation Advanced data processing functions Support for all major relational databases including SQL Server, IBM DB2, Oracle, and more Visual Studio & Eclipse integration Download a fully-functional trial today!