important! The foreword is a must-read!
This chapter mainly studies the pseudo elements of CSS. First of all, we must understand the concept of pseudo elements, that is, what are pseudo elements? How many types of pseudo elements are there? , respectively: (::before, ::after, ::first-line, ::first-letter, ::selection).
What are pseudo elements?
In CSS, a pseudo-element is a CSS selector that is used to select a specific part of an element instead of the entire element. A pseudo-element
::starts with a double colon ( ). The purpose of a pseudo-element is to add additional styling to the selected element part or Generate content.
Pseudo element
- ::before (insert generated content before the content of the selected element)
- ::after (inserts generated content after the content of the selected element)
- ::first-line (select the first line of text of the element)
- ::first-letter (select the first letter/word of the element)
- ::selection (select text selected by the user by dragging the mouse)
Insert the generated content before the content of the selected element: ::before
Notice! ::before is a type of pseudo-element in CSS selectors. Its effect is to insert the generated content before the content of the selected element.
code diagram
renderings
Insert the generated content after the content of the selected element: ::after
Notice! ::after is a type of pseudo element in a CSS selector. Its effect is to insert the generated content after the content of the selected element.
code diagram
renderings
Select the first line of text of an element: ::first-line
Notice! ::first-line is a kind of pseudo element in CSS selector. Its effect is to select the first line of text of the element, that is, to select the first line of element text to add styles. It should be noted that
::first-linepseudo elements can only be applied to blocks. level element.code diagram
renderings
Select the first letter/word of an element: ::first-letter
Notice! ::first-letter is a type of pseudo-element in CSS selectors. Its effect is to select the first letter of the element, which is the first English word letter or Chinese character.
code diagram
renderings
Select text selected by the user by dragging the mouse: ::selectio
Notice! ::selectio is a kind of pseudo element in CSS selector. Its effect is to select the text selected by the user by dragging the mouse.
code diagram
renderings
