content属性需设非空值才能使::before/::after生效，可取字符串（如"•"）、Unicode转义（如"\25B6"）、url()、counter()等，且必须配合伪元素使用。

content 属性里写什么才能显示自定义符号

content 是伪元素生效的核心，它必须有值，且不能为 ""（空字符串）或 none。常见错误是只写了 ::before 却忘了设 content，结果什么也不渲染。

实际可用的值包括：

• content: "•"; —— 直接写 Unicode 字符，如 "→"、"✓"、"◆"
• content: "\25B6"; —— 用 Unicode 十六进制转义（注意前导反斜杠和不加 U+）
• content: url(arrow.svg); —— 引入小图标文件，支持 SVG/PNG，但需注意路径和跨域限制
• content: counter(list-item) ". "; —— 结合 counter-reset/counter-increment 做数字序号

为什么 ::before 不生效？检查 display 和 position

伪元素默认是 display: inline，在

内部使用时容易被文字流挤偏，甚至“看不见”。常见现象是符号跑到了文字中间或换行后。

可靠做法是显式控制布局：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• 给 li::before 加 display: inline-block 或 display: flex，方便设置宽高/对齐
• 用 vertical-align: middle 对齐文本基线（尤其搭配图标时）
• 避免依赖 position: absolute——除非你真需要脱离文档流；否则易导致列表项高度塌陷或点击热区错位
• 若用 url() 加载 SVG，记得设 width/height，否则可能渲染为 0×0

如何让自定义符号和文字保持间距稳定

靠空格或   拼接内容不可靠：字体渲染差异、缩放、换行都可能导致错位。更可控的方式是用 CSS 控制。

• 给 li::before 设固定 width 和 margin-right（如 margin-right: 0.5em）
• 用 flex 布局：li { display: flex; align-items: flex-start; }，再把 ::before 当左子项，li > * 当右内容
• 慎用 letter-spacing 或 word-spacing 影响整个 li，它会连带干扰符号与文字距离
• 如果符号是 SVG，内联 viewBox 并设 fill: currentColor，可继承文字颜色，避免额外样式覆盖

兼容性与可访问性容易被忽略的点

伪元素生成的内容默认不进入 DOM 树，屏幕阅读器通常忽略 ::before 的 content，这对无障碍很危险——比如仅靠 ✓ 符号表达“已完成”，视障用户完全感知不到。

• 关键语义信息（如“已通过”“必填”）绝不能只靠 ::before 表达，必须有真实文本或 ARIA 属性支撑
• content 中的 Unicode 符号在老旧 Android 浏览器或某些字体缺失环境下可能显示为方框（□），建议 fallback 到字体栈或备用方案
• IE11 支持 ::before，但不支持 content: url() 加载 SVG（只认 PNG/GIF），需要条件判断或降级
• 打印样式表中，部分浏览器会忽略 content，如有打印需求，得额外用 @media print 补充真实文本

真正难的不是让符号显示出来，而是让它在不同设备、字体、辅助技术下都稳定传递意图。符号只是视觉糖，语义才是骨架。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！