<p>Use CSS pseudo-elements (::before and ::after) to insert content and enhance visual effects without modifying HTML. 1. The basic usage is to add text or symbols through the content attribute, such as inserting red prompt text before the paragraph; 2. Common techniques include inserting quotes, arrows, icon fonts, and implementing small triangles and other UI details; 3. You can use to match positioning and styles to achieve decorative effects, such as small triangles in the prompt box, button hovering effect, etc.; 4. It was used to clear floats, such as .clearfix::after to solve the floating collapse problem; 5. Notes include: content must exist, pseudo-elements default to inline, cannot be operated by JS, and are not suitable for placing important content because it affects accessibility and SEO. Rational use of pseudo-elements can simplify structure and enhance expressiveness, but abuse of key information should be avoided.

<p>

<p> Using CSS pseudo-elements ( ::before and ::after ) allows us to insert additional content before and after elements in the page without modifying the HTML structure. This is very practical when doing scenes such as decorative content, icons, prompt information, etc.

Basic usage: Add simple text or style

<p> The most basic purpose is to insert text or symbols through content attribute. for example:

 p::before {
  content: "Note:";
  color: red;
}

<p> This will prepend each <p> tag with the red "Note:". It should be noted that if content is not set or the value is an empty value other than the empty string, the pseudo-element will not be displayed .

<p> Common tips include:

• Insert quotation marks, arrows, icon fonts
• Add a decorative line or background decoration
• Implement UI details such as small triangles and dots

Layout and decoration: Small details that enhance visual effects

<p> Pseudo-elements are not only used to add text, but can also be used in conjunction with positioning and style to achieve some small visual decoration. For example, the common "prompt box with arrows" can be used to draw small triangles using ::after :

 .tooltip::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

<p> The advantage of this practice is that it does not require additional labels and is clean in structure. Similar things include button hover effect, gradient border, shadow enhancement, etc., which can all be achieved with the help of pseudo-elements.

Clear floating or other auxiliary functions

<p> Although Flexbox and Grid are now widely used, in some old projects ::after is also commonly used to clear floats. for example:

 .clearfix::after {
  content: "";
  display: table;
  clear: both;
}

<p> This method can solve the floating collapse problem without removing HTML elements. While modern layouts have reduced this need, knowing it can still help maintain old code.

Notes and FAQs

<p> Pay attention to the following points when using pseudo-elements to avoid getting stuck:

• content must be available, even if it is just an empty string ""
• The pseudo-element is inline by default, and display needs to be adjusted according to the situation.
• You can set width, height, positioning, animation and other styles, but they cannot be retrieved or operated by JS.
• Not suitable for important content because they are not in the DOM and are not accessible and SEO friendly

<p> In addition, the content of the pseudo-element will not be selected by the user, nor will it be indexed by the search engine as the main content, so it is only suitable for display additional content.

<p> Basically that's it. If pseudo-elements are used well, they can simplify the structure and improve expressiveness, but don't abuse them, especially not to insert key information.

The above is the detailed content of Employing CSS pseudo-elements (`::before`, `::after`). For more information, please follow other related articles on the PHP Chinese website!