CSS pseudo-elements
CSS pseudo-element is used to add some special effects selectors.
grammar
Pseudo-element syntax:
CSS classes can also use pseudo-elements:
: First-line pseudo-element
"First-line" pseudo-element is used to set up a special style to the first line of text.
In the following example, the browser will be based on "first-line" pseudo-element in the style of the first line of text elements p format:
Examples
{
color:#ff0000;
font-variant:small-caps;
}
Note: "first-line" pseudo-element can only be used for block-level elements.
NOTE: The following properties can be applied 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
: First-letter pseudo-element
"First-letter" pseudo-element is used to set up a special style to the first letter of the text:
Examples
{
color:#ff0000;
font-size:xx-large;
}
Note: "first-letter" pseudo-element can only be used for block-level elements.
NOTE: The following properties can be applied 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 class="article">A paragraph in an article</p>
The above example will make all class as the first letter of the paragraph article turns red.
Multiple Pseudo-elements
A plurality of pseudo-elements can be combined to use.
In the following example, the first paragraph of the letter will be displayed in red, the font size is xx-large. The first line of the rest of the text will be blue, and small capital letters.
The remaining paragraphs of text in the default font size and color to display:
Examples
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
CSS -: before pseudo-element
": Before" pseudo-element can insert new content in front of the content of the element.
The following example to insert a picture in front of each <h1> element:
Examples
{
content:url(smiley.gif);
}
CSS -: after pseudo-element
": After" pseudo-element can insert new content after the content of the element.
The following examples insert a picture after each <h1> element:
Examples
{
content:url(smiley.gif);
}
All CSS pseudo-classes / elements
Selector | Example | Example shows |
---|---|---|
: link | a:link | Select all unvisited links |
: visited | a:visited | Select all visited links |
: active | a:active | Select is an active link |
: hover | a:hover | Put the mouse on the link status |
: focus | input:focus | After selecting the input element has focus |
: first-letter | p:first-letter | Select the first letter of each <p> element |
: first-line | p:first-line | Select the first line of each <p> element |
: first-child | p:first-child | <] P> element selector matches any element belonging to the first child element |
: before | p:before | Insert content before each <p> element |
: after | p:after | Insert content after each <p> element |
: lang (language) | p:lang(it) | lang attribute selection <p> element to a start value |