css ::before与::after伪元素如何添加装饰内容

必须设置content属性才能生效，::before和::after用于在元素前后插入装饰性内容，如引号、图标、分隔符等，不影响文档结构仅用于视觉效果，可结合样式实现复杂设计。

CSS 的 ::before 和 ::after 伪元素用于在元素的内容之前或之后插入装饰性内容，通常配合 content 属性使用。它们不会影响文档结构，只在渲染层添加视觉效果，适合做图标、引号、分隔符等装饰。

::before 与 ::after 基本语法

要使用这两个伪元素，必须设置 content 属性，即使为空也要写成 content: "";，否则伪元素不会生效。

.element::before {
  content: "★";
  color: gold;
}

.element::after {
  content: " (注)";
  color: gray;
}

上面代码会在 .element 内容前加一个星号，后面加“ (注)”灰色文字。

常见装饰用法示例

以下是一些实用的装饰场景：

立即学习“前端免费学习笔记（深入）”；

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

63

查看详情

• 添加引号：适合引用文本

blockquote::before {
  content: "“";
  font-size: 1.5em;
  color: #888;
}
blockquote::after {
  content: "”";
  font-size: 1.5em;
  color: #888;
}
  

登录后复制
• 插入图标或符号：比如用 Font Awesome 或 Unicode 字符

.link::after {
  content: " →";
  color: blue;
}
  

登录后复制
• 添加分隔符：如项目之间加竖线

.list-item:not(:last-child)::after {
  content: " | ";
  color: #ccc;
}
  

登录后复制

结合样式增强视觉效果

伪元素不只是插文字，还能通过 CSS 样式做出更复杂的装饰，比如背景、边框、定位等。

.tip::before {
  content: "!";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #007acc;
  color: white;
  text-align: center;
  border-radius: 50%;
  margin-right: 8px;
  font-weight: bold;
}

这样就在提示文字前创建了一个小圆形图标，提升可读性和美观度。

基本上就这些。只要记得 必须写 content，然后就可以自由发挥添加各种装饰内容。不复杂但容易忽略细节。

以上就是css ::before与::after伪元素如何添加装饰内容的详细内容，更多请关注php中文网其它相关文章！