最稳妥方式是用十六进制转义：::before { content: "\201C"; } ::after { content: "\201D"; }，配合CSS变量控制风格，避免open-quote兼容性问题及构建工具转义失效。
用 ::before 和 ::after 插入双引号最稳妥的方式
直接写 content: '"' 会出问题——多数字体里直角引号（"）在中文排版中显得突兀，且不区分前后；真正该用的是「前引号」和「后引号」，也就是 Unicode 中的 \201C（“）和 \201D（”）。伪元素本身不解析 HTML 实体，必须用十六进制转义。
- 中文语境下，
::before { content: "\201C"; }+::after { content: "\201D"; }才符合排版规范 - 别写成
content: "“"—— 某些编辑器或构建工具会把 UTF-8 引号转义失败，导致 CSS 解析错误或显示为方框 - 如果项目强制用 ASCII 字符集（如某些遗留 build 配置），只能退而求其次用
"，但需同步加font-family限定支持引号样式的字体
quotes 属性配合 content: open-quote 的真实兼容性
W3C 标准里推荐用 quotes 控制引号对，再用 open-quote/close-quote 自动匹配——听起来很理想，但实际落地时坑不少。
- Firefox 和 Safari 支持完整，Chrome 从 v115 起才稳定支持嵌套层级的
quotes，旧版本会忽略第二层以后的定义 - 必须给容器设
quotes，否则content: open-quote直接渲染为空——不是浏览器 bug，是规范要求 - 常见写法：
p.quote { quotes: "\201C" "\201D" "\2018" "\2019"; } p.quote::before { content: open-quote; } p.quote::after { content: close-quote; } - 注意：IE 完全不支持
open-quote，如需兼容，老项目只能手写content: "\201C"
双引号位置错乱？检查 display 和 white-space
伪元素插入后引号跑偏、换行、贴着文字挤在一起，大概率不是引号本身的问题，而是盒模型或空白符处理异常。
-
::before默认是display: inline，若父元素是display: flex或grid，可能被当作独立 flex item 推开——加display: inline-block或用margin-right: 0.1em微调 - 父元素设了
white-space: nowrap，但引号内容被当成独立文本节点，可能被截断或撑开容器——改用white-space: normal或显式设font-size: inherit - 中英文混排时，引号字宽不一致（如思源黑体里中文引号比英文引号宽），用
font-feature-settings: "tnum"无法修正，只能靠letter-spacing局部补偿
需要动态切换引号风格？JavaScript 注入不如 CSS 变量灵活
比如主题切换时，深色模式用弯引号、浅色模式用直引号——别用 JS 动态改 style.content，既难维护又触发重排。
立即学习“前端免费学习笔记（深入）”；
- 用 CSS 自定义属性更干净：
:root { --quote-open: "\201C"; --quote-close: "\201D"; } blockquote::before { content: var(--quote-open); } - JS 只需切变量：
document.documentElement.style.setProperty('--quote-open', '"'); - 注意：CSS 变量不能直接用于
quotes属性（语法不支持），所以open-quote方案在这里失效，必须回归content: var(--quote-open) - 变量值里写
"\201C"没问题，但写"“"在部分构建工具（如 PostCSS 8.4+）中会被自动转义成\u201C，导致无效——坚持用十六进制
引号看着小，但中英文混排、多层嵌套、主题切换、构建压缩这几个点一叠加，很容易在某个环境里突然崩掉。最稳的路径是：固定用 \201C/\201D，避开 open-quote，CSS 变量控制风格，所有样式都走 content 显式声明。
