CSS Basic
CSS HOMECSS Introduction
CSS Syntax
CSS Id & Class
CSS How To
CSS Styling
Styling BackgroundsStyling Text
Styling Fonts
Styling Links
Styling Lists
Styling Tables
CSS Box Model
CSS Box ModelCSS Border
CSS Outline
CSS Margin
CSS Padding
CSS Advanced
CSS Grouping/NestingCSS Dimension
CSS Display
CSS Positioning
CSS Floating
CSS Align
CSS Pseudo-class
CSS Pseudo-element
CSS Navigation Bar
CSS Image Gallery
CSS Image Opacity
CSS Image Sprites
CSS Media Types
CSS Attribute Selectors
CSS Don't
CSS Summary
CSS Examples
CSS ExamplesCSS Quiz
CSS QuizCSS Certificate
CSS References
CSS ReferenceCSS Reference A to Z
CSS Reference Aural
CSS Web Safe Fonts
CSS Units
CSS Colors
CSS Colorvalues
CSS Colornames
CSS Pseudo-elements
| « Previous | Next Chapter » |
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):
Example
Try it yourself » |
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:
Example
Try it yourself » |
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 display the first letter of all paragraphs with class="article", in red.
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:
Example
Try it yourself » |
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:
Example
Try it yourself » |
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:
Example
Try it yourself » |
Pseudo-elements
The "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).
| Pseudo name | Description | CSS |
|---|---|---|
| :after | Adds content after an element | 2 |
| :before | Adds content before an element | 2 |
| :first-letter | Adds a style to the first character of a text | 1 |
| :first-line | Adds a style to the first line of a text | 1 |
| « Previous | Next Chapter » |