纯css装饰侧边用::before/::after伪元素+定位实现，需父容器设position: relative，伪元素用top/bottom撑高、z-index:-1防遮挡，响应式用rem和媒体查询微调，兼顾兼容性与性能。
用 ::before 或 ::after 加边框线或色块做装饰侧边
纯 CSS 实现装饰性侧边，核心就是伪元素 + 定位。不依赖额外 HTML 标签，也不用图片，靠 ::before 或 ::after 在内容块左侧（或右侧）画一条竖线、色条，甚至带图标或渐变的装饰带。
常见错误是直接给伪元素设 width 和 height 却忘了定位上下文——父容器必须有 position: relative，否则 absolute 会往上层找定位祖先，导致偏移错乱。
-
position: absolute的伪元素，必须配合top/bottom和left/right显式定位 - 想让装饰条高度撑满内容块？别写死
height: 100%——它只认父元素的显式高度；改用top: 0; bottom: 0;更可靠 - 如果内容块用了
display: flex或display: grid，伪元素默认不参与布局，不影响内部流，这点很安全
.decorated {
position: relative;
padding-left: 24px;
}
.decorated::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(to bottom, #3b82f6, #1d4ed8);
border-radius: 2px;
}
避免伪元素遮挡文字或交互区域
伪元素默认渲染在内容上方（z-index: auto），如果没控制好层叠顺序，鼠标点不到文字、复制被截断、焦点框错位，都是它干的。
典型场景：带装饰侧边的卡片里放链接或按钮，点击失效；或者用 user-select: none 意外禁用了文本选择。
- 加
z-index: -1让伪元素沉底，但要确保父容器有position: relative（否则z-index不生效） - 如果内容本身需要高亮背景（比如代码块），装饰条用
box-shadow替代background，能绕过层叠干扰 - 测试时用浏览器开发者工具临时关掉
::before，看交互是否恢复——这是最快定位遮挡问题的方法
响应式下装饰侧边的宽度与对齐适配
固定像素的装饰条（如 width: 4px）在小屏上可能太突兀，大屏又显得单薄；更麻烦的是，当内容块缩进用 padding-left 时，这个值也要跟着变，否则文字和装饰条间距失衡。
不是所有设备都需要同样粗细的装饰——移动端优先考虑视觉节奏，而非严格对齐。
- 用
rem或em替代px：比如width: 0.25rem，随根字号缩放 - 媒体查询里同步调
padding-left和伪元素left值，例如小屏时把padding-left: 24px改成16px，left也从0微调为2px防止视觉粘连 - 避免在
@media里重复写整个伪元素规则——只覆盖变化的属性，减少冗余
兼容性与性能注意点：IE、Safari 和重绘开销
::before/::after 在 IE8+ 和所有现代浏览器都支持，但 IE8 不支持多背景、渐变、border-radius 等装饰效果；Safari 旧版本对 transform + 伪元素组合偶有渲染异常。
真正容易被忽略的是性能：如果页面有几十个同类装饰块，每个都用 linear-gradient + border-radius，滚动时可能触发频繁重绘，尤其低端安卓 WebView。
- 简单色块用
background-color，比渐变更轻量；真需要渐变，CSS 变量可复用，避免重复声明 - 避免在伪元素里用
filter: drop-shadow()——它强制开启合成层，内存占用翻倍 - 动画装饰条？宁可用
transform: scaleX(0) → scaleX(1)，别动width，否则触发布局重排
最复杂的不是怎么画那条线，而是它得始终待在该在的位置、不抢交互、不拖慢滚动、换屏幕不崩形——这些细节堆起来，才叫“稳”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
