用::before给加左侧竖线需设父元素position: relative、伪元素content: ""和position: absolute，通过top/bottom: 0控制高度，width和background-color设竖线样式，padding-left与left协同调节间距，响应式用rem或clamp()，嵌套引用推荐css自定义属性统一管理。
用 ::before 给 <blockquote></blockquote> 加左侧竖线，关键在定位和尺寸控制
直接给 <blockquote></blockquote> 设 border-left 最省事，但若要竖线不占内容宽度、可单独调色/粗细/间距，::before 是更干净的选择。核心是让伪元素脱离文本流、绝对定位到左侧，同时不干扰内边距和文字排版。
常见错误是忘记设 position: relative 在父容器上，导致 ::before 相对于 body 定位；或没设 content: ""，伪元素根本不会渲染。
- 必须给
<blockquote></blockquote>加position: relative -
::before要有content: ""、position: absolute - 竖线高度通常设为
100%，但需注意父容器是否能撑开高度（空块或单行时可能失效） - 推荐用
top: 0; bottom: 0;替代height: 100%，兼容性更好
blockquote {
position: relative;
padding-left: 1.5em;
}
blockquote::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background-color: #007bff;
}
竖线离文字太近？调整 padding-left 和 left 需配合处理
只调 padding-left 会让内容整体右移，但竖线还贴着左边缘；只调 left 又可能导致竖线被裁切或覆盖文字。两者必须协同：竖线位置由 left 决定，文字起始位置由 padding-left 决定，差值就是竖线到文字的距离。
- 想要竖线距文字 12px，设
padding-left: 1.5em（约 24px）+left: 12px - 避免用
margin-left推竖线——伪元素不响应 margin 对齐 - 如果引用块有背景色，竖线会被盖住，此时要把
z-index设高，但注意父容器不能是 stacking context 限制者
IE11 下 top/bottom: 0 失效？回退用 height: 100% + 显式高度
IE11 对 top/bottom: 0 在某些 flex 或无明确高度的容器里支持不稳定。如果发现竖线高度塌陷，不是加 min-height，而是换策略：显式指定父容器最小高度，或改用 height: 100% 并确保父级有可计算高度。
- 最稳妥：给
blockquote加min-height: 1.5em（一行文本高度） - 慎用
height: fit-content——IE 不支持 - 若引用块内含图片或子块级元素，
100%高度仍可能不准，此时优先用top/bottom+min-height组合
响应式场景下竖线粗细和间距怎么跟着变？用 rem 或 clamp() 控制
固定写死 width: 3px 在小屏上会显得太粗，大屏又太细。别用媒体查询反复覆盖，直接用相对单位或函数更轻量。
-
width: 0.1875rem（对应 3px @16px 基准），随根字号缩放 - 需要更精细控制：用
width: clamp(2px, 0.15rem, 4px)，保证最小不糊、最大不压字 -
padding-left同理，避免写20px，改用1.25rem或clamp(1rem, 1.2rem, 1.5rem) - 别对
::before单独设字体大小——它不渲染文字，font-size无效
真正麻烦的是多层嵌套引用时的竖线层级和颜色继承。这时候别堆 ::before，改用自定义属性传参，比如 --quote-border-color，再在伪元素里用 var(--quote-border-color) ——否则维护成本会突然升高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
