17370845950

::before通过content属性在元素前插入装饰内容，常用于添加图标、符号等视觉元素。必须设置content，可为文本、Unicode、属性值或空值，配合display、position、background等样式实现精确定位与图形效果，如标题图标、自定义列表标记，提升表现力且不污染HTML结构。

CSS伪元素 ::before 可以在目标元素的内容之前插入装饰性内容，无需修改HTML结构。它常用于添加图标、符号、修饰线条等视觉元素，提升页面表现力。

基本语法与content属性

::before 必须配合 content 属性使用，否则不会生效。content 可以是字符串、计数器、属性值或空内容。

常见写法：

• 使用文本：content: "★";
• 使用特殊符号（如Unicode）：content: "\2025";（显示为项目符号）
• 插入属性值：content: attr(data-label);
• 仅作图形装饰：content: ""; 配合背景或边框实现图形

设置样式与定位

通过CSS可为 ::before 设置尺寸、颜色、位置等样式，使其更灵活地融入布局。

常用技巧：

• 设置 display: inline-block 或 block 以控制布局
• 使用 position: absolute 脱离文档流，精确定位
• 结合 top、left 等调整位置
• 用 background、border、transform 制作图形（如小圆点、箭头、装饰线）

实际应用示例

给标题前加小图标：

h3::before {
  content: "➤";
  color: #ff6b6b;
  margin-right: 8px;
  font-size: 14px;
}

创建自定义列表项标记：

li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #007acc;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
}

基本上就这些。合理使用 ::before 能有效增强视觉层次，同时保持HTML简洁。