This article has participated in the third “topic writing” track at the Diggings Creators Camp. For more details, check out diggings program | Creators Camp
What is a pseudo-element
CSS pseudo-elements represent a child element of an element that logically exists but does not actually exist in the document tree.
Pseudo-elements are used to create and style elements that are not in the document tree. In effect, a pseudo-element is something that a normal selector cannot do by selecting before or after some element. The content of the control is the same as the element, but it is itself an abstraction based on the element and does not exist in the document structure. For example, we can add some text in front of an element with :before and style the text.
Pseudo-elements operate on specific elements at a deeper level than pseudo-classes, and are therefore much less dynamic than pseudo-classes. In fact, pseudo-elements are designed to select the first word (female), the first line of an element’s content, and before or after some content that ordinary selectors cannot do. The content it controls is actually the same as the element, but it itself is an abstraction based on the element and does not exist in the document, so it is called a pseudo-element.
grammar
Pseudo-element syntax:
selector:pseudo-element {property:value; }Copy the code
CSS classes can also use pseudo-elements:
selector.class:pseudo-element {property:value; }Copy the code
: first – line pseudo elements
The “first-line” pseudo-element is used to set a special style to the first line of text.
In the following example, the browser formats the first line of text in the P element according to the style in the “first-line” pseudo-element:
The instance
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
Copy the code
Note: “first-line” pseudoelements can only be used for block-level elements.
Note: The following attributes can be applied to “first-line” pseudo-elements:
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
: first – letter pseudo elements
The “first-letter” pseudo-element is used to set a special style to the first letter of text:
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
Copy the code
Note: The “first-letter” pseudo-element can only be used for block-level elements.
Note: The following attributes 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.article:first-letter {color:#ff0000; } <p class="article"> </p>Copy the code
The example above makes the first letter of all paragraphs with class article red.
Multiple pseudo-elements
Can be used in combination with multiple pseudo-elements.
In the following example, the first letter of the paragraph is shown in red, and the font size is xx-large. The rest of the text in the first line will be blue and in small uppercase letters.
The rest of the text in the paragraph will be displayed in the default font size and color:
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
Copy the code
: before pseudo elements
The “:before” pseudo-element inserts new content in front of the element’s content.
The following examples are in each
Insert a picture before the element:
h1:before
{
content:url(smiley.gif);
}
Copy the code
: after pseudo elements
The “:after” pseudo-element can insert new content after the content of the element.
The following examples are in each
Insert an image after the element:
h1:after
{
content:url(smiley.gif);
}
Copy the code
All CSS pseudo-classes/elements
The selector | The sample | example |
---|---|---|
:link | a:link | Select all unvisited links |
:visited | a:visited | Select all the links you have visited |
:active | a:active | Select the active link |
:hover | a:hover | The state of placing the mouse over the link |
:focus | input:focus | Select element input with focus |
:first-letter | p:first-letter | Select each
The first letter of the element |
:first-line | p:first-line | Select each
The first row of the element |
:first-child | p:first-child | The selector matches the first child of any element
The element |
:before | p:before | At the end of each
Element |
:after | p:after | At the end of each
Element |
:lang(language) | p:lang(it) | for
The lang attribute of the element selects a start value |
That’s all for this post, thank you very much for reading here, if this article is good or a little bit of help to you, please like, follow, share, of course, any questions can be discussed in the comments, I will actively answer, thanks again 😁