CSS基础教程（三十）伪元素：CSS伪元素魔法：用::before和::after让你的网页会说话！

原创于 2025-09-11 09:48:15 发布 · 347 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #javascript

CSS基础教程专栏收录该内容

57 篇文章

订阅专栏

一、什么是CSS伪元素？为什么它们像是网页设计的"作弊码"？

CSS伪元素是CSS中一种特殊的选择器，它们允许开发者为元素添加虚拟的内容并设置样式，而无需在HTML中添加额外的标签。换句话说，它们就像是网页设计师的"作弊码"，让你能够在不污染HTML结构的情况下，实现复杂的视觉效果。

为什么说伪元素如此强大？想象一下：你可以在按钮前添加一个图标，在引用块两侧加上装饰性引号，或者为每个标题添加一个时尚的下划线——所有这些都不需要修改HTML！这不仅仅减少了代码量，更提高了代码的可维护性和语义化。

CSS3规范为了区分伪类和伪元素，引入了双冒号(::)语法，虽然单冒号(:)仍然有效，但现代开发中建议使用双冒号表示伪元素。

/* 旧语法 - 兼容性好 */
.element:before { content: ""; }

/* 新语法 - 推荐使用 */
.element::before { content: ""; }

二、五大伪元素深度解析：不只是::before和::after

1. ::before 和 ::after - 无中生有的魔法

::before和::after是最常用的伪元素，它们需要与content属性一起使用（否则不会生效）。这两个伪元素默认是行内元素，可以用于插入装饰性内容、图标或纯视觉元素。

.element::before {
  content: "前缀"; /* 文本内容 */
  display: inline-block;
  margin-right: 5px;
}

.element::after {
  content: ""; /* 空内容，常用于纯装饰 */
  display: block;
  width: 100%;
  height: 2px;
  background: blue;
}

2. ::first-letter - 打造惊艳的首字母效果

这个伪元素允许你选择块级元素的第一个字母并应用样式，非常适合创建杂志风格的首字母下沉效果。

p::first-letter {
  font-size: 3em;
  float: left;
  line-height: 1;
  margin-right: 0.1em;
  color: #ff4500;
  font-weight: bold;
}

3. ::first-line - 为第一行文本添加特殊样式

::first-line伪元素用于设置元素中第一行文本的样式，无论视口宽度如何变化，它都会自动适应并只影响第一行。

article::first-line {
  font-variant: small-caps;
  font-weight: bold;
  color: #333;
  letter-spacing: 1px;
}

4. ::selection - 改变用户选中文本的外观

这个伪元素允许你自定义用户选中文本时的背景颜色、文字颜色等样式，提供更好的视觉反馈。

::selection {
  background-color: #ff4500;
  color: white;
  text-shadow: none;
}

三、content属性的秘密：不只是文本那么简单

content属性是伪元素的核心，但它能做的远不止插入文本那么简单：

.element::before {
  /* 插入文本 */
  content: "提示：";
  
  /* 插入属性值 */
  content: attr(data-tooltip);
  
  /* 插入图像 */
  content: url("icon.png");
  
  /* 插入计数器 */
  content: counter(item);
  
  /* 插入开闭引号 */
  content: open-quote;
  
  /* 空内容（用于纯样式） */
  content: "";
}

四、实战示例：16个让你脱颖而出的伪元素技巧

1. 工具提示（Tooltip）效果

<div class="tooltip" data-tooltip="这是一个提示信息">悬停在我上面</div>

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-bottom: 1px dotted black;
}

.tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 10px;
  background-color: #333;
  color: white;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 100;
}

.tooltip:hover::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

2. 自定义列表项目符号

ul.custom-bullets {
  list-style: none;
  padding-left: 0;
}

ul.custom-bullets li::before {
  content: "➤";
  color: #ff4500;
  font-weight: bold;
  display: inline-block;
  width: 1.5em;
  margin-right: 0.5em;
}

3. 图像悬停覆盖效果

<div class="image-container">
  <img src="example.jpg" alt="示例图片">
</div>

.image-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.image-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.image-container:hover::before {
  opacity: 1;
}

.image-container::after {
  content: "查看详情";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.5em;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.image-container:hover::after {
  opacity: 1;
}

4. 自定义复选框

<div class="custom-checkbox">
  <input type="checkbox" id="agree" hidden>
  <label for="agree">我同意条款</label>
</div>

.custom-checkbox label::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  border-radius: 3px;
  margin-right: 10px;
  vertical-align: middle;
  transition: all 0.3s ease;
}

.custom-checkbox input:checked + label::before {
  content: "✓";
  background-color: #ff4500;
  border-color: #ff4500;
  color: white;
  text-align: center;
  line-height: 18px;
  font-size: 14px;
}

5. 高级引用块设计

<blockquote class="fancy-quote">
  <p>这是一个非常重要的引用内容，它值得被特别展示。</p>
</blockquote>

.fancy-quote {
  position: relative;
  padding: 20px 30px;
  margin: 40px 0;
  font-style: italic;
  background-color: #f9f9f9;
  border-left: 5px solid #ff4500;
}

.fancy-quote::before,
.fancy-quote::after {
  content: """;
  font-size: 4em;
  color: #ff4500;
  position: absolute;
  opacity: 0.2;
}

.fancy-quote::before {
  top: -10px;
  left: 10px;
}

.fancy-quote::after {
  content: """;
  bottom: -30px;
  right: 10px;
}

限于篇幅，这里只展示了部分示例，但已足够展示伪元素的强大能力。

五、伪元素动画与交互：让页面活起来

伪元素完全可以参与CSS动画和过渡，这为创意实现打开了新世界的大门：

.animated-button {
  position: relative;
  padding: 12px 24px;
  background-color: #333;
  color: white;
  border: none;
  cursor: pointer;
  overflow: hidden;
}

.animated-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.animated-button:hover::before {
  left: 100%;
}