The best CSS pseudo-elements Tutorial In 2024, In this tutorial you can learn grammar,: First-line pseudo-element,Examples,: First-letter pseudo-element,Examples,Pseudo-elements and CSS classes,Multiple Pseudo-elements,Examples,CSS -: before pseudo-element,Examples,CSS -: after pseudo-element,Examples,All CSS pseudo-classes / elements,
CSS pseudo-element is used to add some special effects selectors.
Pseudo-element syntax:
CSS classes can also use pseudo-elements:
"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:
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:
"First-letter" pseudo-element is used to set up a special style to the first letter of the text:
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:
Pseudo-elements can be combined with CSS classes:
The above example will make all class as the first letter of the paragraph article turns red.
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:
": 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:
": After" pseudo-element can insert new content after the content of the element.
The following examples insert a picture after each <h1> element:
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 |