CSS中引号显示需用英文双引号包裹Unicode字符或转义码，避免中文引号失效；需显式设置display:inline/inline-block与margin-right防布局压缩；多层嵌套引用依赖counter计数器；字体须兜底Noto Sans CJK等中文字体。
content里必须用英文引号包中文引号
直接写content: “”或content: '“'会失效——CSS只认英文双引号包裹的字符串。正确写法是content: "“"（左引号）和content: "”"（右引号）。复制粘贴文档里的弯引号、用中文输入法打的引号，浏览器解析时会当空字符串处理，图标直接消失。
兼容性更稳的做法是用 Unicode：content: "\201C"（左）和content: "\201D"（右），IE8+ 都能认。
display:inline + margin-right 是显示呼吸感的关键
伪元素默认display: inline，但一旦父容器设了display: flex或display: grid，::before可能被压缩成零宽，引号紧贴文字甚至被裁掉。
- 显式声明
display: inline或inline-block - 加
margin-right: 0.3em让引号和正文保持合理间距 - 避免父元素设
overflow: hidden，否则引号边缘容易被截断
多层嵌套引用得靠 counter，不能只靠 ::before
单个blockquote::before只能打同一套引号。想实现外层双引号、内层单引号（如「他说：“这事得查清楚。”」），纯 CSS 没法自动识别嵌套层级。
立即学习“前端免费学习笔记（深入）”；
必须用计数器配合：
blockquote {
counter-increment: quote-level;
}
blockquote::before {
content: "";
}
blockquote:nth-of-type(1)::before { content: "“"; }
blockquote:nth-of-type(2)::before { content: "‘"; }
更可靠的是用counter()函数动态生成：content: counter(quote-level, lower-roman) " “";，再配合counter-reset控制层级。
字体兜底和中文字体渲染差异要提前防
中文引号在不同系统上渲染效果不一致：Windows 上常偏细、iOS 上字重略重、部分安卓机型可能缺字。如果font-family没兜底，引号会回退成方框或空白。
推荐写法：
blockquote::before {
content: "“";
font-family: "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}
别省略sans-serif兜底；若项目已引入 Noto Sans CJK，优先放它，兼容性最稳。
content用了中文引号、父容器布局干扰、或字体没兜底。这三个点对齐了，引文图标基本就稳了。 
