blockquote::before必须声明content才渲染，否则伪元素不存在；引号推荐用\201C/\201D；cite属性需attr(cite)显式调用；父元素须position:relative；尺寸定位应使用em/rem适配响应式。
blockquote::before 必须声明 content 才会渲染
不写 content，伪元素就等于不存在——哪怕加了 display: block 或设置了颜色、字体，浏览器也完全忽略它。这是最常被忽略的前提条件。
常见错误现象：引号没显示，检查控制台无报错，但元素树里根本看不到 ::before 节点。
-
content值可以是字符串（如"\201C"）、open-quote、attr(data-source)，甚至空字符串""（用于占位+定位） - Unicode 引号推荐用
\201C（左双引号）和\201D（右双引号），比直接写中文引号更可控、兼容性更好 - 若用
open-quote，需配合quotes属性定义引号对，否则可能 fallback 到英文直角引号或不显示
引文来源（cite）不能靠 ::before 自动注入
中的 cite 属性本身不渲染任何内容，::before 也不会自动读取它——必须显式用 attr(cite) 提取。
使用场景：想在引文末尾或下方动态显示来源链接，而不是硬编码在 HTML 里。
- 正确写法：
blockquote::after { content: " — " attr(cite); font-size: 0.85em; color: #777; } - 注意：
cite是 HTML 属性名，不是 CSS 属性，attr()里必须拼写完全一致、大小写敏感 - 如果
cite值含空格或特殊字符（如 URL），浏览器会原样输出；建议配合text-overflow: ellipsis或 JS 截断处理
定位闭合引号 ::after 时，父容器必须 position: relative
blockquote::after 设为 position: absolute 后，若父级 blockquote 没有定位上下文，它就会相对于 定位，导致位置飘移、响应式失效。
容易踩的坑：只给 ::before 加了 relative，忘了给 blockquote 本身设 position: relative。
- 必须设置：
blockquote { position: relative; } -
blockquote::after推荐用bottom: -10px; right: 0;放在右下角，比top/left更适配多行文本高度变化 - 若引号字体过大导致溢出容器，可用
transform: translateY(-50%)微调垂直居中，避免依赖固定top值
响应式下引号尺寸与间距要脱离 px 依赖
用固定 font-size: 80px 和 left: -20px 在小屏上会撑破布局，且无法随文本缩放——这不是“看起来小”，而是实际破坏了排版流。
真正可控的方式是把尺寸锚定到文本本身。
- 改用
em或rem：font-size: 4em;表示“引号是当前font-size的 4 倍” - 定位偏移也用
em：left: -0.5em;、top: -0.3em;，这样缩放时引号和文本保持相对关系 - 如果需要更精细控制（比如移动端隐藏引号），用媒体查询 +
display: none，别试图用opacity: 0或visibility: hidden——它们仍占渲染空间
引号对齐真正的难点不在“怎么放上去”，而在“怎么让它不随着字体、行高、padding、margin 的微小变化而错位”。尤其是 ::after 在多行块引用末尾的定位，稍有不慎就会悬在半空或压住文字——这时候与其反复调 top，不如先确认 line-height 是否统一、padding 是否为引号预留了足够空间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
