CSS偽元素::before和::after可用於在不修改HTML的情況下插入內(nèi)容或應(yīng)用樣式。 1. 可用於添加裝飾性元素，如引號(hào)或圖標(biāo)，通過(guò)設(shè)置content屬性及相應(yīng)樣式實(shí)現(xiàn)；2. 能增強(qiáng)按鈕或鏈接效果，如懸停時(shí)顯示雙層邊框，利用絕對(duì)定位和透明度變化創(chuàng)建動(dòng)態(tài)過(guò)渡；3. 曾用於清除浮動(dòng)以修復(fù)佈局問(wèn)題，通過(guò)在容器後插入隱藏元素並應(yīng)用clear屬性完成佈局閉合，現(xiàn)雖較少使用但仍適用於遺留代碼。

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 tooltips 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 give 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.

以上是使用CSS偽元素進(jìn)行有針對(duì)性的樣式（例如，:: ::之前，::之後）的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！