直接写 blockquote::before 没反应是因为伪元素需 content 才渲染，且 absolute 定位依赖父元素设 position: relative；Bootstrap 5+ 的 .blockquote 默认无定位上下文和足够内边距，导致引号错位或不可见。
为什么直接写 blockquote::before 没反应？
因为 blockquote 默认是 display: block，但没设 position: relative，伪元素的 absolute 定位会相对于最近的已定位祖先找位置——如果父容器没设 position，就可能跑到 viewport 顶部或被裁剪。更关键的是：Bootstrap 5+ 的 .blockquote 类本身不带 position，也不保证内部有足够行高/内边距来容纳大号引号。
blockquote::before 必须显式设置 content 和定位上下文
伪元素必须有 content 才能渲染，哪怕只是空字符串；而要精确定位（比如左上角放引号），就得让父元素成为定位上下文：
- 给
.blockquote加position: relative -
::before设position: absolute+top/left值 -
content不能省，可用 Unicode 字符如"\201C"（中文左双引号）或纯文本"“" - 加
font-size、line-height: 0和vertical-align控制基线对齐，避免引号“飘”在文字上方
不同引号风格的 content 写法差异
引号不是随便打两个字符就行，浏览器对 open-quote / close-quote 的解析依赖 quotes 属性，而手动写字符串更可控：
- 中文直角引号：
content: "“";或content: "\201C"; - 英文弯引号：
content: "\201C";（左）和content: "\201D";（右） - 用
attr()动态读取属性值（如data-lang="zh"）时，需配合quotes规则才生效，不推荐初学者用 - 避免用全角空格或不可见字符填充，会导致布局错位
响应式下引号尺寸和位置容易崩
大字号引号在小屏上会撑开容器、覆盖文字，或因 absolute 脱离文档流后失去参照：
立即学习“前端免费学习笔记（深入）”；
- 用
em或rem单位让引号随父字体缩放，别用固定px - 加
@media调整font-size和top/left偏移量 - 如果引用块用了
flex或grid布局，::before的absolute定位可能失效——此时得改用display: grid配合::before作为 grid item - 无障碍方面：伪元素内容不会被读屏软件朗读，重要语义引号应保留在 HTML 中
::before，而是没意识到它依赖父容器的定位上下文和内容排版空间。一个没设 position: relative 的 .blockquote，再漂亮的引号代码也白写。 
