CSS伪元素::before/::after需配合content属性插入装饰内容，content不能为空；常见用法包括空字符串、Unicode符号、attr()值及图片；须设置display和定位控制样式，且不被屏幕阅读器识别。
直接用 CSS 给元素加 ::before 或 ::after，配合 content 属性就能插入装饰内容，不需要改 HTML。关键在于 content 必须有值（哪怕为空），且伪元素默认是 inline，常需调整 display 和定位来控制外观。
必须写 content 才能生效
伪元素不写 content 就不会显示。常见写法包括：
- 空内容：content: "" —— 适合画三角、圆点、线条等纯图形
- 文字或符号：content: "→"; 或 content: "★"; —— 直接插入 Unicode 字符
- 属性值：content: attr(data-tip); —— 动态读取元素的 data-tip 属性
- 图片：content: url("icon.svg"); —— 插入小图标文件
常用装饰场景与写法
多数装饰效果靠组合 display、position、宽高和背景实现：
- 标题前加圆点：设置 display: inline-block; 宽高+背景色+border-radius 制作实心圆
- 引用块加引号：用 ::before 插入 “，::after 插入 ”，配合 absolute 定位到角落
- 按钮悬停箭头：hover 状态下让 ::after 显示 → 符号，并加 margin-right 过渡动画
- 标签角标：用 border 技巧（如 left/top 为 0，只设单边框）画小三角指向右上角
注意布局与继承行为
::before 和 ::after 是元素的“子级”，但不在 DOM 中，所以：
立即学习“前端免费学习笔记（深入）”；
- 它们默认继承父元素的字体、颜色等文本样式，可单独覆盖
- 若要用 width/height/margin/padding，display 建议设为 inline-block 或 block
- absolute 定位时，父元素要设 position: relative 才能正确参照
- 不要用它放重要信息——屏幕阅读器通常忽略伪元素内容，也不支持复制
避免常见坑
几个容易出错的地方：
- 写成 :before 而不是 ::before —— 虽然浏览器兼容单冒号，但推荐双冒号以区分伪类
- 忘记给伪元素设 display，导致宽高、背景无效
- 在 flex 容器里用 ::after 清浮动 —— 其实没必要，flex 自带流式清除
- content 里误写中文引号“”而非英文 " " —— 会导致语法错误
