Pseudo-elements
Pseudo-elements were introduced to allow designers to access and apply styles to locations in the document which cannot be selected using normal CSS selectors. Unlike other elements, pseudo-elements don't appear in the source code of a document or the document tree for a page.
There are four pseudo-elements in the CSS 2.1 specification:
- :first-line - applies to the first line of text in the specified element.
- :first-letter - applies to the first letter of text in the specified element.
- :before - allows you to place generated content before the specified element.
- :after - allows you to place generated content after the specified element.
Examples
:first-line
p.altered:first-line{color: red; font-size: 2em;}
This paragraph of text has been styled using the :first-line pseudo-element, the first line of text has the text colour changed to red and the size of the font has been doubled.
:first-letter
p.altered:first-letter{color: red; font-size: 2em;}
This paragraph of text has been styled using the :first-letter pseudo-element, the first letter of text has the text colour changed to red and the size of the font has been doubled.
The before and after pseudo-elements are used in conjunction with the CSS content property.
:before
p.altered:before{content: "Design tip: "; text-transform: uppercase;}
This paragraph of text has been styled using the :before pseudo-element and the content property to insert the text 'Design tip: ' before any paragraph of the specified class and change the text to uppercase.
:after
p.altered:after{content: "THE END. "; font-family: cursive;}
This paragraph of text has been styled using the :after pseudo-element and the content property to insert the text 'THE END.' after any paragraph of the specified class and change the font to cursive.