最常见原因是blockquote未设position: relative导致伪元素absolute定位失效；其次content为空、引号用全角字符或父级overflow: hidden也会使其不可见。
为什么 ::before 添加的引号不显示？
最常见原因是 blockquote 默认没有 position: relative，而伪元素若使用 absolute 定位却找不到定位上下文，就会“消失”或错位。另外，content 值为空、引号编码错误（如写成中文全角引号）、或被父级 overflow: hidden 裁剪，也会导致不可见。
- 务必给
blockquote加上position: relative -
content必须用英文双引号" "或 Unicode 引号（如"\201C"表示左双引号） - 避免在
blockquote上设置overflow: hidden，否则可能裁掉定位偏移的引号
如何用 content 插入标准排版引号？
CSS 里不能直接写 ““ 这种视觉引号——浏览器会按字体渲染，且易被复制乱码。推荐用 Unicode 编码："\201C"（左双引号）和 "\201D"（右双引号）。它们来自 Unicode “General Punctuation” 区，兼容性好，且语义正确。
blockquote {
position: relative;
padding-left: 2em;
}
blockquote::before {
content: "\201C";
position: absolute;
left: 0;
top: 0;
font-size: 3em;
line-height: 0.5;
color: #999;
}
怎样让引号对齐多行引用的首行？
单纯用 top: 0 会让引号贴在块顶部，但实际需要垂直居中于第一行文字的 x-height 区域。关键是控制 line-height 和 transform：
-
line-height: 0.5压缩伪元素自身行高，避免撑开布局 - 用
transform: translateY(-0.2em)微调，比硬调top更稳定 - 如果引用文字用了
font-size: 1.2em，引号建议设为font-size: 2.5em，保持视觉比例
移动端适配时引号变小或错位怎么办？
响应式场景下，font-size 固定值（如 3em）在小屏会显得过大甚至溢出。更稳妥的做法是用 rem 或视口单位，并配合 max-width 限制：
@media (max-width: 768px) {
blockquote::before {
font-size: 2.2rem;
left: -0.4rem;
}
}
注意：不要用 vmin，它在窄高屏（如 iPhone 竖屏）下会过度缩小；优先用 rem 配合根字号调整，或者用 em 相对于 blockquote 自身字号。
引号的视觉权重容易被忽略——它不是装饰，而是语义锚点。一旦字号、位置或 Unicode 编码没对齐排版规范，用户扫读时第一眼就“卡住”。调试时盯住那一个字符的位置和颜色就够了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
