:: pseudo elements使用了什么:: :: ::？

CSS 的 ::before 和 ::after 伪元素用于在元素内容前后插入装饰性内容或辅助布局，常见用途包括：1. 添加装饰元素如图标、分隔符或自定义项目符号；2. 插入上下文相关的文本或符号如外部链接标识或章节编号；3. 清除浮动以解决布局问题（旧技术）；4. 在不增加 HTML 标签的情况下实现阴影、边框等样式效果。两者均可独立设置样式并结合定位使用，但通过 content 属性添加的内容不可被选中或可靠地访问屏幕阅读器，因此不应包含关键信息。

The ::before and ::after pseudo-elements are used to insert content before or after the content of an element in CSS. They’re commonly used for decorative elements, adding icons or text without changing HTML, or clearing floats.

Add Decorative Elements

These pseudo-elements are perfect for adding small visual enhancements like icons, background shapes, or separators. Since they don’t require extra markup, you can keep your HTML clean while still achieving a polished look.

For example:

• Adding quotation marks around a blockquote using content: "“"; inside ::before and ::after
• Creating custom bullet points for lists
• Making tooltips or badges with small triangles using border tricks on ::before

They work best when you want something subtle that supports the design but isn’t essential to the content itself.

Insert Contextual Text or Symbols

Sometimes you need to add small bits of text based on context — things like “(required)” after form labels or chapter numbers in a document layout. You can do this without touching the HTML by using ::before or ::after with the content property.

Some common uses:

• Showing external links with an icon or text like (external)
• Displaying dates or categories in blog posts dynamically
• Adding prefixes or suffixes conditionally based on classes

Just remember: content added this way is not selectable or accessible to screen readers reliably, so it shouldn't contain critical information.

Clear Floats (Older Layout Technique)

Before Flexbox and Grid, people often used ::after to clear floats. The trick was to apply something like:

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

Then applying the .clearfix class to any container with floated children would prevent layout issues. It's less needed now, but you might still see it in older codebases or CMS themes.

Style Without Extra Markup

One big benefit of ::before and ::after is that you can style them independently from the main element. This lets you layer effects like shadows, overlays, or borders without wrapping content in extra divs.

A few practical cases:

• Adding a line under headings with a bit of spacing using ::after
• Creating double borders or multi-layer backgrounds
• Animating hover effects that come in from one side

You can even stack both ::before and ::after on the same element for more complex visuals.

基本上就这些。 They’re flexible tools once you get used to how they behave — especially with positioning and stacking.

以上是:: pseudo elements使用了什么:: :: ::？的详细内容。更多信息请关注PHP中文网其他相关文章！