CSS偽元素::before和::after允許在不修改HTML的情況下插入并樣式化非DOM內(nèi)容。通過設(shè)置content屬性，可在元素內(nèi)容前后添加裝飾性文本或符號，并應(yīng)用字體、背景、定位甚至動畫等樣式，例如添加帶顏色的“Note: ”標(biāo)簽或按鈕懸停動畫。常見用途包括動態(tài)圖標(biāo)、提示標(biāo)簽、表單標(biāo)記及UI效果。但需注意：未設(shè)置content則偽元素?zé)o效；無法通過JavaScript交互；且不支持嵌套HTML結(jié)構(gòu)。

CSS pseudo-elements like ::before and ::after let you insert content onto a page without modifying the actual HTML. That inserted content isn't part of the DOM, but it's rendered visually — and you can style it just like regular elements.

What Are ::before and ::after?

These are special CSS selectors that let you add content before or after an element’s existing content. The key here is: this content lives in the browser’s rendering layer, not in the DOM itself.

For example:

.box::before {
  content: "Note: ";
  color: red;
}

This adds the word “Note: ” in red before the content inside .box. But if you inspect the DOM, you won’t find that text there — it's only in the rendered output.

How Do They Style Non-DOM Content?

Once you've added content using content, you can apply styles to it. This includes:

• Font styles (like color, font-size)
• Backgrounds and borders
• Positioning (especially useful with position: absolute)
• Even animations and transitions

Here’s a more practical example:

.button::after {
  content: " ?";
  transition: transform 0.2s;
}

.button:hover::after {
  transform: translateX(5px);
}

When someone hovers over .button, the arrow animates slightly to the right — all without changing the HTML at all.

Common Use Cases You Might See

These pseudo-elements are often used for:

• Adding decorative icons or symbols next to links or buttons
• Creating tooltips or labels dynamically
• Building UI effects like shadows or overlays without extra markup
• Styling form elements subtly, like adding asterisks to required fields

They’re especially handy when you want to keep your HTML clean but still need visual enhancements.

A Few Gotchas to Watch For

• If content isn’t set, the pseudo-element won’t show up at all.
• You can’t interact with pseudo-elements via JavaScript since they aren’t in the DOM.
• Not everything you'd do on a real element works — things like nesting other HTML elements inside them don’t work.

So while they're powerful for styling, they’re limited when it comes to scripting or complex structure.

That’s how ::before and ::after work — simple idea, but pretty flexible once you know the tricks.

以上是:: pseudo-elements如何允許造型非dom內(nèi)容？的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！