::before 和::after 中双冒号和单冒号有什么区别，作用

pax大约 3 分钟

CSS 中 ::before 和 ::after 的单冒号与双冒号区别

1. 基本概念

CSS 伪元素用于在元素内容前后插入虚拟内容，不需要在 HTML 中实际存在。

2. 单冒号 vs 双冒号的区别

单冒号 (`:before` 和 `:after`) - CSS2 语法

.element:before {
  content: "前缀";
  color: red;
}

.element:after {
  content: "后缀";
  color: blue;
}

双冒号 (`::before` 和 `::after`) - CSS3 语法

.element::before {
  content: "前缀";
  color: red;
}

.element::after {
  content: "后缀";
  color: blue;
}

3. 主要区别

特性	单冒号 `:before/:after`	双冒号 `::before/::after`
CSS 版本	CSS2	CSS3
分类区分	伪类和伪元素都用单冒号	明确区分伪类和伪元素
兼容性	所有浏览器支持	IE9+ 支持
语义性	不够清晰	更具语义性

4. 详细示例说明

<!DOCTYPE html>
<html>
<head>
<style>
  /* 基础用法 */
  .quote::before {
    content: """;
    font-size: 1.5em;
    color: #999;
  }
  
  .quote::after {
    content: """;
    font-size: 1.5em;
    color: #999;
  }
  
  /* 创建装饰元素 */
  .decorated::before {
    content: "★ ";
    color: gold;
  }
  
  .decorated::after {
    content: " ★";
    color: gold;
  }
  
  /* 创建几何形状 */
  .tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }
  
  .tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
  }
  
  .tooltip::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
  }
  
  .tooltip:hover::after,
  .tooltip:hover::before {
    opacity: 1;
    visibility: visible;
  }
  
  /* 清除浮动 */
  .clearfix::before,
  .clearfix::after {
    content: "";
    display: table;
  }
  
  .clearfix::after {
    clear: both;
  }
  
  /* 创建图标 */
  .external-link::after {
    content: "↗";
    margin-left: 5px;
    font-size: 0.8em;
  }
  
  /* 创建计数器 */
  .counter {
    counter-reset: section;
  }
  
  .counter h2::before {
    counter-increment: section;
    content: "Section " counter(section) ": ";
  }
</style>
</head>
<body>
  <p class="quote">这是引用的文字内容</p>
  
  <p class="decorated">这是装饰文本</p>
  
  <span class="tooltip" data-tooltip="这是提示信息">悬停查看提示</span>
  
  <div class="clearfix">
    <div style="float: left; width: 45%; background: lightblue;">左浮动内容</div>
    <div style="float: right; width: 45%; background: lightcoral;">右浮动内容</div>
  </div>
  
  <p>查看更多信息 <a href="#" class="external-link">外部链接</a></p>
  
  <div class="counter">
    <h2>介绍</h2>
    <h2>主要内容</h2>
    <h2>总结</h2>
  </div>
</body>
</html>

5. 伪元素的限制和特性

必须包含 `content` 属性

/* 错误：不会显示 */
.element::before {
  width: 10px;
  height: 10px;
  background: red;
}

/* 正确：必须有 content */
.element::before {
  content: "";
  width: 10px;
  height: 10px;
  background: red;
  display: inline-block;
}

无法通过 JavaScript 直接选择

// 无法直接选择伪元素
// document.querySelector('::before') // 错误

// 但可以通过 getComputedStyle 获取样式
const element = document.querySelector('.element');
const beforeContent = getComputedStyle(element, '::before').content;

6. 实用技巧和模式

创建几何图形

.triangle::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid red;
}

.circle::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
}

创建复杂的装饰效果

.ribbon::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: linear-gradient(45deg, transparent 50%, red 50%);
}

表单验证图标

.valid::after {
  content: "✓";
  color: green;
  margin-left: 5px;
}

.invalid::after {
  content: "✗";
  color: red;
  margin-left: 5px;
}

7. 兼容性考虑

/* 为了兼容老浏览器，可以同时写两种语法 */
.element:before,
.element::before {
  content: "★";
  color: gold;
}

/* 或者使用工具自动转换 */

8. 最佳实践建议

优先使用双冒号：现代项目推荐使用 ::before 和 ::after
始终包含 content：即使是空字符串 ""
注意 z-index：伪元素可能需要调整层级
考虑可访问性：装饰性内容对屏幕阅读器应该是隐藏的
合理使用：避免过度使用导致代码难以维护

9. 与其他伪元素的关系

CSS3 中引入了更多的双冒号伪元素：

::first-line    /* 首行 */
::first-letter  /* 首字母 */
::selection     /* 选中内容 */
::placeholder   /* 占位符 */
::backdrop      /* 全屏元素背景 */

总结来说，单冒号和双冒号在功能上没有区别，主要是语法规范的演进。现代开发中推荐使用双冒号以保持一致性并明确区分伪类和伪元素。