Detailed Explanation of CSS Pseudo-elements (::before and ::after)

1. Basic Concept of Pseudo-elements

Pseudo-elements are tools in CSS used to insert virtual elements before or after an element's content. They do not appear in the HTML source code but are dynamically generated through CSS. Common pseudo-elements include:

• ::before: Inserts a virtual element before the element's content.
• ::after: Inserts a virtual element after the element's content.

Note:

• Pseudo-elements require the content property to take effect (even if the content is empty, it must be set as content: "").
• In early CSS specifications, pseudo-elements used a single colon (e.g., :before), but modern specifications recommend using double colons (::before) to distinguish them from pseudo-classes (e.g., :hover).

2. Basic Syntax and Usage Steps

Step 1: Select the target element and define the pseudo-element

.element::before {
  content: "Prefix";
  color: red;
}
.element::after {
  content: "Suffix";
  color: blue;
}

At this point, the content of the target element will display as: Prefix Element Content Suffix.

Step 2: Understand the Flexibility of the content Property

content can be set to:

• Text: content: "Hint Text"
• Empty String: content: "" (often used for decorative graphics)
• Image: content: url(image.png)
• Counter: content: counter(counter-name)
• Attribute Value: content: attr(data-text) (reads the element's HTML attribute)

3. Layout Characteristics of Pseudo-elements

Pseudo-elements are inline elements (display: inline) by default, but their display can be modified via CSS:

.element::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  background: gold;
}

At this point, the pseudo-element will occupy a line by itself, similar to a block-level element.

4. Examples of Practical Application Scenarios

Scenario 1: Decorative Icons or Separators

Add an arrow icon to a link:

a::after {
  content: "→";
  margin-left: 5px;
}

Scenario 2: Clearing Floats (Traditional Method)

Add a clear float effect to a container via ::after:

.container::after {
  content: "";
  display: block;
  clear: both;
}

Scenario 3: Tooltip

Use the attr() function to dynamically retrieve content from an HTML attribute:

<span data-tooltip="Hint Text">Hover over me</span>

span:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  background: black;
  color: white;
  padding: 5px;
  border-radius: 3px;
}

Scenario 4: Custom List Markers

Replace default list markers:

ul li::before {
  content: "✦";
  color: purple;
  margin-right: 8px;
}

5. Advanced Techniques and Considerations

1. Stacking Order: Pseudo-elements share the same stacking level as their parent element, but this can be controlled with z-index (requires the position property).
2. Interaction Limitations: Pseudo-elements cannot be directly selected or have events bound to them via JavaScript, but they can be indirectly influenced through their parent element.
3. Performance Optimization: Excessive use of pseudo-elements may lead to rendering performance degradation, especially in dynamic content.

6. Difference from Pseudo-classes

• Pseudo-classes (e.g., :hover) represent the state of an element.
• Pseudo-elements represent virtual child elements of an element.
  Both can be used together:

button:hover::before {
  content: "❤";
}

By mastering pseudo-elements, you can more flexibly control page styles, reduce redundancy in HTML structure, and achieve complex visual effects with pure CSS.