解锁CSS超能力：::before和::after伪元素完全指南

最新推荐文章于 2026-03-27 13:00:54 发布

原创最新推荐文章于 2026-03-27 13:00:54 发布 · 579 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#css #前端

前端同时被 2 个专栏收录

24 篇文章

订阅专栏

CSS

7 篇文章

订阅专栏

引言：神奇的CSS伪元素

在CSS的世界里，有两个低调但功能强大的工具——::before和::after伪元素。它们不占用DOM空间，却能创造出各种视觉效果，是前端开发者必备的"魔法道具"。

.element::before {
  content: "";
  /* 你的魔法代码 */
}

.element::after {
  content: "";
  /* 你的魔法代码 */
}

基础概念解析

什么是伪元素？

伪元素是CSS创建的虚拟元素，它们：

不在HTML结构中存在
但会像真实元素一样渲染显示
必须配合content属性使用

`::before` vs `::after`

特性	`::before`	`::after`
插入位置	元素内容之前	元素内容之后
典型用途	装饰性前缀、图标前置	装饰性后缀、清除浮动
默认层级	位于主内容下层	位于主内容上层

实战案例集锦

案例1：精美装饰效果

标题装饰线

.section-title {
  position: relative;
  text-align: center;
}

.section-title::before,
.section-title::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background: #ddd;
}

.section-title::before {
  left: 0;
}

.section-title::after {
  right: 0;
}

悬浮放大效果

.image-card:hover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  transition: all 0.3s;
}

案例2：实用UI组件增强

自定义复选框

.checkbox-label::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid #ccc;
  margin-right: 8px;
  vertical-align: middle;
}

.checkbox-input:checked + .checkbox-label::before {
  content: "✓";
  color: white;
  background: #1e80ff;
  text-align: center;
  line-height: 16px;
}

输入框必填标记

.required-field::before {
  content: "*";
  color: red;
  margin-right: 4px;
}

案例3：创意视觉效果

价格标签

.price-tag::after {
  content: "¥";
  font-size: 0.8em;
  vertical-align: super;
  margin-left: 2px;
}

对话气泡

.bubble::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 20px;
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: #1e80ff transparent;
}

案例4：性能优化技巧

图片懒加载占位

.lazy-image::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9比例 */
  background: #f5f5f5;
}

内容加载指示器

.loading::after {
  content: "⠋";
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

高级应用场景

组件库定制（如TDesign）

/* 替换数字输入框加减图标 */
:deep(.t-input-number__decrease)::after {
  content: "<";
  font-weight: bold;
}

:deep(.t-input-number__increase)::after {
  content: ">";
  font-weight: bold;
}

响应式设计

/* 在小屏幕上隐藏装饰元素 */
@media (max-width: 768px) {
  .decorative-element::before,
  .decorative-element::after {
    display: none;
  }
}

动态内容展示

<div data-tooltip="这是提示内容"></div>

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  /* 其他定位样式 */
}

最佳实践与注意事项

始终设置content属性
即使是空字符串content: ""
可访问性考虑
重要信息不要仅依赖伪元素，屏幕阅读器可能无法识别
性能优化
避免在大量元素上使用复杂伪元素动画
浏览器兼容性
旧版IE需要单冒号写法(:before)
调试技巧
在开发者工具中可查看伪元素，但无法通过JS直接操作

结语

::before和::after是CSS中最具创造力的特性之一。从简单的装饰到复杂的交互效果，它们都能优雅地完成任务。掌握这些技巧后，你会发现很多原本需要额外HTML元素或JavaScript才能实现的效果，现在用纯CSS就能轻松搞定。

现在，打开你的代码编辑器，开始用伪元素创造魔法吧！记住，唯一的限制是你的想象力。