CSS3 伪元素选择器

CSS3 的伪元素选择器是一组特殊的选择器，它们允许我们选择元素的特定部分或虚拟元素。与伪类选择器不同，伪元素选择器实际上是在 DOM 中创建虚拟的元素，可以像真实元素一样应用样式。

伪元素概述

伪元素选择器用于选择元素的特定部分，如首字母、首行、选中文本等，或者在元素的内容前后插入虚拟内容。CSS3 将伪元素从单冒号改为双冒号，以区分伪类和伪元素。

伪元素与伪类的区别

• 伪类：选择元素的特定状态，如 :hover、:active、:focus
• 伪元素：选择元素的特定部分或创建虚拟元素，如 ::before、::after

CSS3 的变化

CSS3 将伪元素的语法从单冒号改为双冒号：

/* CSS2 语法 */
:before
:after
:first-letter
:first-line

/* CSS3 语法 */
::before
::after
::first-letter
::first-line

::before 伪元素

::before 伪元素用于在选定元素的内容之前插入虚拟内容。

基本用法

/* 在元素前插入内容 */
.element::before {
  content: "前缀：";
  color: red;
  font-weight: bold;
}

/* 插入图标 */
.icon-link::before {
  content: "🔗";
  margin-right: 5px;
}

/* 插入装饰元素 */
.blockquote::before {
  content: "“";
  font-size: 3em;
  color: #007bff;
  line-height: 1;
}

实际应用

/* 引用样式 */
blockquote::before {
  content: "“";
  font-size: 4em;
  color: #007bff;
  line-height: 1;
  float: left;
  margin-right: 10px;
}

/* 提示框 */
.info-box::before {
  content: "ℹ️";
  margin-right: 10px;
}

.warning-box::before {
  content: "⚠️";
  margin-right: 10px;
}

.error-box::before {
  content: "❌";
  margin-right: 10px;
}

::after 伪元素

::after 伪元素用于在选定元素的内容之后插入虚拟内容。

基本用法

/* 在元素后插入内容 */
.element::after {
  content: "（后缀）";
  color: blue;
}

/* 插入图标 */
.download-link::after {
  content: "⬇️";
  margin-left: 5px;
}

/* 插入装饰元素 */
.blockquote::after {
  content: "”";
  font-size: 3em;
  color: #007bff;
  line-height: 1;
}

实际应用

/* 外部链接标识 */
a[href^="http://"]::after,
a[href^="https://"]::after {
  content: " ↗";
  font-size: 0.8em;
  color: #007bff;
}

/* 清除浮动 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* 分隔线 */
.separator::after {
  content: " | ";
  color: #6c757d;
  margin: 0 10px;
}

::first-letter 伪元素

::first-letter 伪元素用于选择块级元素的第一个字母。

基本用法

/* 首字母下沉 */
p::first-letter {
  font-size: 3em;
  float: left;
  line-height: 1;
  margin-right: 10px;
}

/* 首字母样式 */
h1::first-letter {
  font-size: 1.5em;
  color: #007bff;
}

实际应用

/* 文章首字母下沉 */
article p::first-letter {
  font-size: 3em;
  float: left;
  line-height: 1;
  margin-right: 10px;
  font-weight: bold;
  color: #007bff;
}

/* 标题首字母样式 */
h2::first-letter {
  font-size: 1.5em;
  color: #007bff;
  text-transform: uppercase;
}

::first-line 伪元素

::first-line 伪元素用于选择块级元素的第一行文本。

基本用法

/* 首行样式 */
p::first-line {
  font-weight: bold;
  color: #007bff;
}

/* 首行大写 */
p::first-line {
  text-transform: uppercase;
}

实际应用

/* 文章首行样式 */
article p::first-line {
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
}

/* 段落首行缩进 */
p::first-line {
  text-indent: 2em;
}

::selection 伪元素

::selection 伪元素用于选择用户选中的文本。

基本用法

/* 选中文本样式 */
::selection {
  background: #007bff;
  color: white;
}

/* 火狐浏览器 */
::-moz-selection {
  background: #007bff;
  color: white;
}

实际应用

/* 全局选中文本样式 */
::selection {
  background: #007bff;
  color: white;
}

::-moz-selection {
  background: #007bff;
  color: white;
}

/* 特定元素选中文本样式 */
.article p::selection {
  background: #28a745;
  color: white;
}

.article p::-moz-selection {
  background: #28a745;
  color: white;
}

::placeholder 伪元素

::placeholder 伪元素用于选择表单元素的占位符文本。

基本用法

/* 占位符样式 */
input::placeholder {
  color: #6c757d;
  font-style: italic;
}

/* 浏览器前缀 */
::-webkit-input-placeholder {
  color: #6c757d;
}

::-moz-placeholder {
  color: #6c757d;
}

:-ms-input-placeholder {
  color: #6c757d;
}

实际应用

/* 表单占位符样式 */
input::placeholder {
  color: #adb5bd;
  font-size: 14px;
}

/* 必填字段占位符 */
input[required]::placeholder {
  color: #dc3545;
}

input[required]::placeholder::before {
  content: "* ";
}

实际应用案例

1. 引用样式

blockquote {
  position: relative;
  padding: 20px;
  background: #f8f9fa;
  border-left: 4px solid #007bff;
  margin: 20px 0;
}

blockquote::before {
  content: "“";
  position: absolute;
  left: 10px;
  top: -10px;
  font-size: 4em;
  color: #007bff;
  line-height: 1;
}

blockquote::after {
  content: "”";
  position: absolute;
  right: 10px;
  bottom: -30px;
  font-size: 4em;
  color: #007bff;
  line-height: 1;
}

2. 按钮样式

.button {
  position: relative;
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
}

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

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

3. 卡片样式

.card {
  position: relative;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #007bff;
}

.card::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, #007bff, transparent);
}

4. 导航样式

.nav {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav li {
  position: relative;
}

.nav a {
  display: block;
  padding: 15px 20px;
  color: #333;
  text-decoration: none;
}

.nav a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: #007bff;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.nav a:hover::before {
  width: 80%;
}

5. 工具提示

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  background: #333;
  color: white;
  font-size: 14px;
  white-space: nowrap;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.tooltip:hover::before {
  opacity: 1;
}

高级技巧

1. 清除浮动

/* 清除浮动 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* 更现代的清除浮动 */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

2. 创建三角形

/* 三角形 */
.triangle::before {
  content: "";
  border: 10px solid transparent;
  border-top-color: #007bff;
}

/* 不同的三角形 */
.triangle-up::after {
  content: "";
  border: 10px solid transparent;
  border-bottom-color: #007bff;
}

3. 创建装饰元素

/* 装饰圆点 */
.decorated::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #007bff;
  border-radius: 50%;
  margin-right: 10px;
}

/* 装饰线条 */
.separated::after {
  content: "";
  display: inline-block;
  width: 50px;
  height: 1px;
  background: #007bff;
  margin-left: 10px;
  vertical-align: middle;
}

浏览器兼容性

伪元素选择器在所有现代浏览器中都有良好的支持：

• Chrome 1+
• Firefox 1+
• Safari 1+
• Edge 所有版本
• IE 8+

最佳实践

1. 使用双冒号语法

/* 推荐 - 使用双冒号 */
.element::before {
  /* 样式 */
}

/* 不推荐 - 使用单冒号 */
.element:before {
  /* 样式 */
}

2. 合理使用 content 属性

/* 推荐 - 合理使用 content */
.icon::before {
  content: "🔗";
}

/* 不推荐 - 过度使用 content */
.element::before {
  content: "这是一段很长的文本内容，可能会影响布局和可访问性";
}

3. 考虑可访问性

/* 推荐 - 考虑可访问性 */
.screen-reader-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* 不推荐 - 不考虑可访问性 */
.element::before {
  content: "重要信息";
  /* 屏幕阅读器可能无法读取 */
}

4. 避免过度使用

/* 推荐 - 适度使用 */
.button::before {
  content: "→";
  margin-right: 5px;
}

/* 不推荐 - 过度使用 */
.element::before,
.element::after {
  content: "";
  position: absolute;
  /* 复杂的定位和样式 */
}

总结

CSS3 的伪元素选择器提供了强大的样式控制能力：

主要伪元素：

• ::before - 元素内容前插入虚拟内容
• ::after - 元素内容后插入虚拟内容
• ::first-letter - 元素的第一个字母
• ::first-line - 元素的第一行文本
• ::selection - 用户选中的文本
• ::placeholder - 表单占位符文本

实际应用：

• 引用样式美化
• 按钮装饰效果
• 卡片样式设计
• 导航菜单效果
• 工具提示创建
• 清除浮动
• 装饰元素添加

最佳实践：

• 使用双冒号语法
• 合理使用 content 属性
• 考虑可访问性
• 避免过度使用
• 保持代码简洁

优势：

• 减少 HTML 元素
• 提高代码可维护性
• 增强样式灵活性
• 创建装饰效果
• 优化页面性能

掌握伪元素选择器，能够让我们在不增加 HTML 元素的情况下，创建丰富的视觉效果和装饰元素，大大提高代码的可维护性和灵活性。