CSS伪元素before和after的常见用法包括：1.**添加装饰性内容**：如图标、箭头、边框等，无需额外HTML标签。2.**清除浮动**：通过设置`content:""`和`display:table`实现。3.**创建响应式设计**：结合媒体查询实现不同屏幕尺寸下的样式变化。4.**实现悬停效果**：如按钮悬停时的下划线、背景变化等。5.**生成动态内容**：如在元素前添加计数器、提示信

本篇文章给大家分享《CSS伪元素before和after常见用法有哪些》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

::before 和 ::after 必须设置 content 才生效，否则不可见；适用于添加装饰图标、纯CSS图形、清除浮动及自动引号等场景，且需注意定位上下文与 display 设置。

::before 和 ::after 必须配 content 才生效，否则完全不可见——这是 90% 初学者第一次写不出来的根本原因。

添加装饰性图标或符号

适合在按钮、链接、标题旁加小箭头、星号、外部链接图标等，不污染 HTML 结构。

• content 可用纯文本（"→"）、Unicode（"\00A9" 表示 ©）、或 attr(data-icon) 动态读取属性值
• 伪元素默认是 display: inline，若需宽高/定位，必须显式设为 block 或 inline-block
• 注意：用 Unicode 时推荐转义写法（如 \2714 ✄），避免文件编码不一致导致乱码

.btn::before {
  content: "→";
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}

构建纯 CSS 图形（三角、气泡箭头）

利用 border 的三角技巧 + 绝对定位，零图片实现对话框小三角、下拉指示箭头等。

• 核心原理：把一个 width: 0; height: 0 元素的三边设为 transparent，剩下一侧设颜色，就形成三角
• 气泡提示中，通常 ::before 做背景框，::after 做三角，两者都需 position: absolute 并共用 top/left 定位基准
• 三角位置偏移常用 margin-left: -5px（半宽）居中，而非靠 transform，更稳定

.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: #333;
}

清除浮动（.clearfix）

虽然 Flex/Grid 已成主流，但遇到老项目或内联块布局时，仍需靠 ::after 解决父容器高度塌陷问题。

• 关键三要素：content: "" + display: block + clear: both
• 不能用 ::before 替代——它插在内容最前，无法撑开底部；::after 插在最后，才能真正“清”掉浮动流
• 现代写法可省略 display: table 等兼容旧版 hack，仅保留上述三行即可覆盖 IE8+

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

自动添加引号或修饰文本

语义化处理引用类内容（如

、），避免手动写 " 破坏可维护性。

• 推荐用 open-quote / close-quote 而非硬编码引号，支持多语言引号规则（如中文用「」，英文用 “”）
• 必须给宿主元素加 position: relative，否则 ::before/::after 的绝对定位会相对于视口定位
• 不要用它放有语义的内容（比如关键说明文字）——屏幕阅读器通常忽略伪元素，且无法被复制选中

blockquote {
  position: relative;
  quotes: "“" "”" "‘" "’";
}
blockquote::before { content: open-quote; }
blockquote::after { content: close-quote; }

真正难的不是写出来，而是记住：所有效果都依赖 content 存在；所有定位都依赖宿主元素有 position 上下文；所有图形都靠 border 或 transform 的像素级控制——漏掉任意一环，伪元素就“隐身”了。

终于介绍完啦！小伙伴们，这篇关于《CSS伪元素before和after的常见用法包括：1.**添加装饰性内容**：如图标、箭头、边框等，无需额外HTML标签。2.**清除浮动**：通过设置`content:""`和`display:table`实现。3.**创建响应式设计**：结合媒体查询实现不同屏幕尺寸下的样式变化。4.**实现悬停效果**：如按钮悬停时的下划线、背景变化等。5.**生成动态内容**：如在元素前添加计数器、提示信息等。6.**美化列表项**：如添加项目符号、图标或分隔线。7.**实现双栏布局**：通过伪元素创建侧边栏或分栏效果。这些用法能有效提升代码简洁性和可维护性，同时增强页面视觉效果。》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！

前往漫画官网入口并下载 ➜

您即将跳转至第三方网站，请注意保护好个人信息和财产安全！

继续访问