CSS - Pseudo-element
CSS pseudo-elements are used to add special effects to some selectors.
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 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
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 is used to add a special style to the first letter of a text:
:first-letter Example
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
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 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.
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
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
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
h1:before
{
content:url(smiley.gif);
}
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
h1:after
{
content:url(smiley.gif);
}
| 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 |
