CSS中中文引号需用英文双引号包裹content值，如content: "“";，禁用中文引号或单引号；须设display: inline、加margin-right；多层嵌套用counter实现不同引号；字体需兜底至Noto Sans CJK等现代中文字体。
content属性必须用英文引号包裹
伪元素的引号不是自动识别的标点，content 里写 "“" 和 "”" 才能渲染出中文引号；直接写 “ 或用中文输入法打的弯引号，CSS 解析会失败或显示空格。常见错误是复制粘贴文章里的引号，结果页面啥也不显示。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
content: "“";—— 注意是英文双引号包着中文左引号 - 别用
content: “;（缺右引号）或content: '“';（单引号在某些旧浏览器里可能不认） - 如果要兼容 IE8+，优先用 Unicode 编码：
content: "\201C";（左引号）和content: "\201D";（右引号）
before伪元素需要display:inline才能撑开引号间距
默认 ::before 是 display: inline，但一旦给引用块（比如 <blockquote></blockquote>）设了 display: flex 或 display: grid，它的子元素（包括伪元素）会受容器影响，导致引号挤在文字开头没留空、甚至被裁掉。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 显式声明
blockquote::before { display: inline; } - 加
margin-right: 0.3em;让引号和文字保持呼吸感 - 避免对父容器设
overflow: hidden，否则引号可能被截断
多层嵌套引用时用counter实现递进引号样式
纯 CSS 没法判断“这是第几层引用”，所以 ::before 默认只能打同一套引号。想让 <blockquote></blockquote> 套 <blockquote></blockquote> 显示不同引号（比如外层用双引号、内层用单引号），得靠 CSS 计数器。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给最外层引用设
counter-reset: quote-level; - 每层
blockquote::before先counter-increment: quote-level;，再用content配合counter()切换内容 - 示例：
blockquote::before { content: counter(quote-level) = 1 ? "“" : "‘"; }—— 注意这不是原生语法，需用多个选择器模拟，比如blockquote::before和blockquote blockquote::before分别定义
字体缺失时引号显示为方框或问号
中文引号依赖系统字体支持。如果用户系统没装思源黑体、Noto Sans CJK 等覆盖全 Unicode 的字体，"“" 可能渲染成豆腐块（□）或 。这不是代码错，是字体回退链没配好。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
font-family里明确加中文字体兜底：font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; - 避免只写
"SimSun"—— Windows XP 时代的老字体不支持 U+201C/U+201D - 如需绝对可控，把引号做成 SVG 背景图，但会失去文本可选性和缩放清晰度
