17370845950

::before 和 ::after 插入符号必须设置 content 属性才能渲染，其值可为空字符串、Unicode 符号或图标字体字符码；需配合 position、display、font-family 等控制定位、对齐与样式，并注意继承性、响应式及可访问性。

用 ::before 和 ::after 插入符号必须加 content

这两个伪元素默认不渲染，content 属性是唯一触发它们显示的开关。不写 content: "" 或 content: "★"，哪怕写了 color 或 background 也完全看不到。

• content 值为空字符串 "" 时，伪元素仍会生成（可用来占位、加背景或边框）
• 插入 Unicode 符号直接写，比如 content: "→"；插入图标字体（如 Font Awesome）需配合 font-family 和对应字符码，例如 content: "\f054";
• 不能用 content: url(...) 插入图片后还指望它响应式缩放——它会被当作内联替换元素，宽高需额外设 width/height

::before 和 ::after 的定位与层级容易错乱

它们默认是 inline 级别，且位于元素内容流中，不是绝对定位的“浮层”。想让它出现在文字前面/后面但又不挤占原文本位置，得主动干预。

• 常用组合：position: absolute + left/right + top，但前提是父元素有 position: relative（否则会相对于最近的定位祖先）
• 若想保持行内对齐（比如在按钮文字旁加小图标），改用 display: inline-block 并配 vertical-align: middle
• 层级上，::before 永远在 ::after 下面，两者都在元素内容之下——想盖

  

  住内容？得设 z-index 并确保父容器不是 static

插入符号后样式微调经常失效

伪元素继承部分父级样式（如 color、font-size），但很多属性不继承，且无法用 JavaScript 选中或操作。

• font-family 不会自动继承，尤其用图标字体时必须显式声明，否则显示为方块
• margin 在 display: inline 下只影响左右，上下无效；改用 padding 或切到 inline-block
• 想让符号随文字大小缩放？用 em 单位，比如 font-size: 0.8em，而不是固定 px

button {
  position: relative;
  padding-left: 24px;
}
button::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #28a745;
  font-size: 1.1em;
}

复杂点在于：符号是否要响应交互状态（比如 hover 时变色）、是否需适配暗色模式（color 得用 var(--text)）、以及伪元素本身能否被屏幕阅读器识别——默认不可读，加 aria-hidden="true" 是安全做法，但若符号承载语义（如必填标记 *），就得换方案。