::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" 是安全做法，但若符号承载语义（如必填标记 *），就得换方案。
立即学习“前端免费学习笔记（深入）”；
