The ::before and ::after pseudo-elements of CSS can insert content before and after HTML elements, and are often used to add decorations, icons or separators; 1. It must be used with the content attribute and can be an empty string; 2. The insertion content is an inline element and cannot be operated by default through JS; 3. Common uses include inserting arrows, dots, logos, etc., which support attr() to obtain attribute values, Unicode characters, font icons and background images; 4. It can be combined with selectors such as nth-child and class names to achieve fine-grained control; 5. Be careful not to act on self-closed tags, hierarchies may be overwritten, affect accessibility and old IE compatibility issues.

With CSS's ::before and ::after pseudo-elements, you can easily insert content before or after HTML elements without modifying the HTML structure. They are often used to add decorative content, icons, separators, etc.

But to really use these two pseudo-elements well, there are several key points to pay attention to, especially when used with the CSS selector.

Basic syntax and required properties

::before and ::after need to be used with content attribute, otherwise it will not take effect.
The basic structure is as follows:

 selector::before {
  content: "Inserted content";
  /* Can add style*/
}

selector::after {
  content: "";
}

<li> content is required, even if it's just an empty string (like you just want to insert an icon background).<li> The inserted content is "generated content", which is an inline element by default. You can set display: block or other layout methods.<li> These contents do not exist in the DOM and cannot be retrieved or operated through JS.

Use scenario: Add decorative content or small icon

Common uses include adding an arrow symbol after a link, adding a small dot before the title, or adding a mark to elements of certain specific class names.

For example:

 .link::after {
  content: " →";
  color: #007bff;
}

This way, all elements with the .link class will be followed by a blue arrow.

Common Tips:

<li> Use attr() to insert HTML attribute value, such as content: attr(data-label) .<li> Use Unicode characters or font icons, such as content: "\2192" to represent the right arrow.<li> To display the image icon in conjunction with background-image , content can be an empty string.

How to combine CSS selector with more flexible control

You can place ::before and ::after behind almost any legitimate CSS selector to achieve finer granular control.

Example 1: Apply only to specific child elements

 li:nth-child(odd)::before {
  content: "? ";
  color: green;
}

This code will precede <li> of each odd digit with a green check mark.

Example 2: Add different styles according to the class name combination

 .message.warning::before {
  content: "?? ";
}

.message.error::before {
  content: "? ";
}

This way, different icons can be automatically inserted according to different class names.

Commonly used matching selectors:

<li> .class::after <li> element#id::before <li> a:hover::after <li> p:first-of-type::before

Notes and FAQs

While pseudo-elements are practical, there are some limitations and error-prone areas:

<li> Cannot act on self-closing tags : tags like <img alt="How to use ::before and ::after pseudo-elements with CSS Selectors?" > and <input> cannot use ::before or ::after . <li> Hierarchy problem : The default z-index of the pseudo-element is low and may be overwritten by other elements. If necessary, position and z-index need to be set. <li> Impact accessibility : The content in the pseudo-element will not be read by the screen reader and is not suitable for placing important information. <li> Browser Compatibility : Modern browsers support it, but there may be compatibility issues in older versions of IE.

Basically that's it. After mastering these key points, you can flexibly use ::before and ::after on various selectors to enhance the expressiveness of the page.

The above is the detailed content of How to use ::before and ::after pseudo-elements with CSS Selectors?. For more information, please follow other related articles on the PHP Chinese website!