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 😁