CSS::before和::after用法详解

想为你的网页增添吸睛的装饰效果吗？CSS 的 `::before` 和 `::after` 伪元素绝对是你的利器！本文深入解析了如何利用这两个伪元素，结合 `content` 属性，在元素前后插入各种装饰性内容，如引号、图标、分隔符等，轻松实现美化页面的目的。务必记住，`content` 属性是生效的关键，即使为空也需要设置。文章还提供了丰富的实用示例，教你如何运用 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 内容前加一个星号，后面加“ (注)”灰色文字。

常见装饰用法示例

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

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

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用法详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！