CSS pseudo-elements are used to add special effects to some selectors.
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 a special style to the first line of a text.
The “first-line” pseudo-element can only be applied to block-level elements.
Example
Format the first line of the text in p elements:
{
color:#ff0000;
font-variant:small-caps;
}
- 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.
The “first-letter” pseudo-element can only be applied to block-level elements.
Example
Format the first letter of the text in p elements:
{
color:#ff0000;
font-size:xx-large;
}
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>A paragraph in an article</p>
The example above will display the first letter of all paragraphs with, 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
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
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
{
content:url(smiley.gif);
}
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
{
content:url(smiley.gif);
}
All CSS Pseudo Classes/Elements
| Selector | Example | Example description |
|---|---|---|
| :link | a:link | Selects all unvisited links |
| :visited | a:visited | Selects all visited links |
| :active | a:active | Selects the active link |
| :hover | a:hover | Selects links on mouse over |
| :focus | input:focus | Selects the input element which has focus |
| :first-letter | p:first-letter | Selects the first letter of every <p> element |
| :first-line | p:first-line | Selects the first line of every <p> element |
| :first-child | p:first-child | Selects every <p> elements that is the first child of its parent |
| :before | p:before | Insert content before every <p> element |
| :after | p:after | Insert content after every <p> element |
| :lang(language) | p:lang(it) | Selects every <p> element with a lang attribute value starting with “it” |