直接用 ::before 在 .blockquote 上不生效，因 Bootstrap 5+ 的 .blockquote 默认 display: block 且未设 position: relative，导致伪元素定位失效；需添加 position: relative、content: "" 及绝对定位样式才能正确显示。
为什么直接用 ::before 在 .blockquote 上不生效？
因为 Bootstrap 5+ 的 .blockquote 默认是 display: block，但它的内部结构里没有预留伪元素定位空间——尤其当引用内容为空或仅含纯文本时，::before 可能渲染在块顶部外侧、被父容器裁剪，或因未设置 position: relative 导致绝对定位失效。
真正起作用的路径是：给 .blockquote 加 position: relative，再用 ::before 绝对定位到左上角/左边缘，并显式设置 content 和尺寸。
- 必须声明
content: ""，否则伪元素不渲染 -
font-size影响图标大小，建议用em或rem避免缩放失真 - Bootstrap 4 和 5 的
.blockquote类名一致，但 5 移除了默认margin-bottom，需手动补
怎么让引号图标紧贴文字左侧且垂直居中？
靠 top: 50% + transform: translateY(-50%) 实现垂直居中，水平方向用 left: -1.2rem（负值拉出边框），同时确保 .blockquote 有足够 padding-left 避免文字重叠。
.blockquote {
position: relative;
padding-left: 2.5rem;
}
.blockquote::before {
content: "“";
position: absolute;
left: -1.2rem;
top: 50%;
transform: translateY(-50%);
font-size: 3rem;
line-height: 1;
color: #6c757d;
}
-
line-height: 1防止引号因行高撑开错位 - 若用字体图标（如 Font Awesome），替换
content为\f10d并加font-family: "Font Awesome 5 Free" - 响应式下建议用
clamp(1.5rem, 4vw, 3rem)控制图标大小
如何兼容 Bootstrap 的 .blockquote-footer 不被遮挡？
.blockquote-footer 默认是 margin-top: 0.75rem，但伪元素若高度过大，会和 footer 重叠。解决方式不是调低 z-index（伪元素默认在内容层之上），而是限制伪元素的 height 并确保 .blockquote 的 padding-top 足够。
立即学习“前端免费学习笔记（深入）”；
- 给
.blockquote加padding-top: 1.2rem预留空间 - 避免对
::before设置height，改用font-size和line-height控制视觉高度 - 如果 footer 文字多行，加
word-break: break-word防溢出
为什么在 .blockquote 嵌套 <footer> 后伪元素偏移了？
因为 <footer class="blockquote-footer"> 是块级元素，默认占满宽度，它会改变 .blockquote 的流式布局，导致 ::before 的 top: 50% 计算基准变成整个块高度（含 footer），而不是引文内容高度。
稳妥做法是把伪元素定位目标从整个 .blockquote 切换到引文内容本身——给引文文字包裹一层 <p> 或 <div class="blockquote-content">，再对它设 position: relative 并挂载 ::before。
- Bootstrap 官方示例中引文总是用
<p>包裹，这是最佳实践 - 不要依赖
.blockquote > :first-child做选择器，它在多段落场景下不可靠 - 若必须用原生结构，可用
.blockquote p:first-of-type::before替代
padding、子元素 margin 和字体度量影响，调试时优先检查 computed styles 中的 offsetTop 和 getBoundingClientRect() 返回值，而不是只看 CSS 规则。 
