CSS pseudo-elements::before and ::after can be used to insert content or apply styles without modifying HTML. 1. It can be used to add decorative elements, such as quotes or icons, and can be achieved by setting content attributes and corresponding styles; 2. It can enhance the button or link effect, such as displaying double-layer borders during hovering, and create dynamic transitions using absolute positioning and transparency changes; 3. It was used to clear floats to fix layout problems, and the layout closure is completed by inserting hidden elements behind the container and applying the clear attribute. It is now rarely used, but it is still applicable to legacy code.

You can use CSS pseudo-elements like ::before and ::after to insert content or apply styles without modifying the HTML. These tools are especially handy when you want to add decorative elements, icons, or subtle layout tweaks directly through CSS.

Adding Decorative Elements with ::before and ::after

One of the most common uses for pseudo-elements is adding small visual touches that don't need HTML markup. For example, you might want to put a little icon before links or add quotation marks around a blockquote.

To do this, you set the content property (which is required), then style it as needed:

 blockquote::before {
  content: """;
  font-size: 2em;
  color: #888;
}

This adds an opening quotation mark at the beginning of every <blockquote> . You can adjust size, color, spacing — anything you'd normally style.

A few quick tips:

• Always include content: "" even if it's empty.
• Use display: inline-block or block if you need more control over spacing.
• Positioning works well here — try position: absolute for custom layouts.

Enhancing Buttons or Links Without Extra Markup

Pseudo-elements let you create hover effects, background layers, or borders without extra HTML elements. For instance, if you want a button with a double border effect on hover, you could layer one border using ::after .

Here's how:

 .button::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid #007BFF;
  opacity: 0;
  transition: opacity 0.3s;
}

.button:hover::after {
  opacity: 1;
}

This creates a smooth reveal of a secondary border when someone hovers over the button. The benefit? Cleaner HTML and more modular styling.

Some other ideas:

• Add a background overlay on hover.
• Create toolstips or badges dynamically.
• Style the first letter of a paragraph differently (like in magazine drop caps).

Clearing Floats or Fixing Layout Issues

Before Flexbox and Grid became standard, developers used ::after to clear floats. While not as common now, it's still useful in legacy code or when working within constraints.

The trick involves inserting an element after the floated ones and clearing it:

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

Apply this class to any container holding floated items, and it will properly contain them. It's a small but powerful fix that avoids adding extra divs just for layout.

Basically, pseudo-elements gives you more styling flexibility without changing your HTML structure. They're simple once you get used to the syntax and behavior — and they open up a lot of creative options.

The above is the detailed content of Employing CSS Pseudo-elements for Targeted Styling (e.g., ::before, ::after). For more information, please follow other related articles on the PHP Chinese website!