content: open-quote 和 close-quote 是 CSS content 属性的特殊值，用于根据 quotes 属性定义的引号对自动插入开口和闭合引号，需显式设置 quotes 才生效，且仅作用于 ::before/::after 伪元素。
content: open-quote 和 close-quote 是什么
它们是 content 属性的特殊值，不是字符串字面量，而是由浏览器根据当前语言环境和 quotes 属性自动解析的引用符号。比如中文可能用「」，英文用“”，法语用«»——这些都不用手动写死。
quotes 属性必须显式设置才能生效
open-quote 和 close-quote 不会凭空工作。浏览器默认的 quotes 值因 UA 而异，且多数情况下不包含中文引号。你得主动定义：
blockquote {
quotes: "“" "”" "‘" "’";
}
上面这行表示：第一层用“”、第二层用‘’（嵌套引用时自动降级）。没设 quotes，open-quote 就可能渲染成空或问号。
- 必须写在被
::before/::after引用的**同一选择器**或其祖先上（CSS 继承规则起作用） - 值是成对出现的字符串，每对前后引号用空格分隔，多对之间用空格或换行
- 不支持单引号混用：比如
quotes: "「" "」";可以，但quotes: '「' '」';会失效（单引号不被识别为字符串边界）
为什么 ::before/::after 必须配合 position 或 display 才能准确定位引号
伪元素默认是 display: inline，且插入在内容流中。直接写：
blockquote::before { content: open-quote; }
blockquote::after { content: close-quote; }
会导致引号跟文字挤在一起、换行错乱、无法垂直居中。常见修复方式：
- 加
display: block或inline-block控制尺寸和换行行为 - 用
position: absolute脱离文档流，再配合top/left精确放置（需父元素position: relative） - 避免对
content直接设font-size后引号大小失真——优先用em单位并继承父级行高
屏幕阅读器和 SEO 对 quotes 内容基本不可见
open-quote 渲染出的符号不会出现在 DOM 中，也不会被 JS 读取（getComputedStyle(el, '::before').content 返回字符串但不可交互），更重要的是：
- 绝大多数屏幕阅读器跳过
::before/::after生成的内容 - 搜索引擎不索引这些符号，所以别指望靠它塞关键词
- 如果引号有语义（比如表示对话开始/结束），应在 HTML 里用
“/”显式写出；伪元素只负责视觉补全
真正容易被忽略的点是：quotes 层级嵌套时，content: no-open-quote 和 no-close-quote 很少有人用，但它们才是控制多层引用不重复闭合的关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
