在 bootstrap 5 中，.blockquote 的 ::before 伪元素默认不显示，因缺少 position: relative、content 声明及定位控制；需三者齐备才能生效，推荐用类名动态控制样式并调试伪元素节点。
在 Bootstrap 5 中直接用 ::before 给 .blockquote 加装饰图标或引号，**并不更方便——反而容易失效**。真正“方便”的前提是先解决定位失效问题，否则写一堆样式也看不到效果。
为什么 ::before 在 .blockquote 上默认不显示？
Bootstrap 5 的 .blockquote 默认是 display: block，但没设 position: relative，导致你写的 ::before 无法用 top/left 精确定位；同时，content 为空或未显式声明也会让伪元素彻底不渲染。
-
::before必须搭配content属性（哪怕只是content: ""）才能生成节点 - 绝对定位（
position: absolute）必须作用于有position: relative的父容器，否则会相对于最近的定位祖先或偏移 - 若引用块内容为空或纯文本，
::before可能被裁剪、挤到块外侧，肉眼不可见
怎么让 ::before 在 .blockquote 上真正生效？
不是加个选择器就完事，得补全三要素：定位上下文 + 内容声明 + 尺寸/位置控制。
- 给
.blockquote显式加position: relative - 用
.blockquote::before { content: "“"; position: absolute; top: 0; left: 0; }—— 缺一不可 - 如果要显示图标（比如 Font Awesome），建议用
content: "\f10d"+font-family: "Font Awesome 6 Free"，别依赖url()，后者不能缩放且路径易错 - 注意
z-index：若引号被文字盖住，需给::before设z-index: 1
用类名动态控制 ::before 样式更可靠
硬写死样式不利于复用，尤其当不同引用块需要不同引号、颜色或图标时，靠 JS 切换 class 比改 CSS 更可控。
- 基础样式里只定义
.blockquote的position: relative和通用::before结构 - 用
.blockquote.quote-left::before和.blockquote.quote-right::before分别定义左右引号 - 避免直接覆盖
content值以外的属性（如color或font-size），否则可能和 Bootstrap 原有文本样式冲突 - 测试时打开 DevTools → Elements 面板，检查
::before是否出现在伪元素节点里，而不是只看 Styles 面板
最容易被忽略的是：伪元素不参与文档流，也不触发重排，但一旦定位出错或 content 为空，它就彻底“隐身”——连 outline 都框不到。调试时先确认 content 有值、父元素有 position: relative、DevTools 能看到伪元素节点，再调样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
