看不见 ::after 分隔线最常见原因是未设置 content: ""，且需定义尺寸和样式；水平分隔线贴右侧可用绝对定位+垂直居中；多元素共用分隔线应由父容器统一绘制。
用 ::after 生成分隔线时，为什么看不见？
最常见原因是没设置 content，或者没给伪元素定义尺寸和视觉样式。CSS 伪元素默认不渲染，content: "" 是硬性前提，否则后续所有样式（比如背景、边框）都无效。
-
::after必须搭配content属性，哪怕只是空字符串：content: "" - 如果只设了
border-bottom，但元素本身没有高度或display不支持边框（如display: inline），线也不会显示 - 注意父容器是否设置了
overflow: hidden，可能把伪元素裁掉
水平分隔线怎么贴在元素右侧？
适合用于菜单项、标签列表等场景，让分隔线紧挨文字右侧，不换行。关键是用 position: absolute 或 display: inline-block 配合 vertical-align 控制对齐。
li {
position: relative;
padding-right: 16px;
}
li::after {
content: "";
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 1px;
height: 12px;
background-color: #ccc;
}
- 用
top: 50%+transform: translateY(-50%)垂直居中，比设固定top更健壮 - 避免用
border-right，因为会撑开父元素内边距或影响文本对齐 - 若需响应式缩放，建议用
height+background，而非border
分隔线需要留白或自定义颜色/粗细，参数怎么调？
分隔线本质是块级视觉元素，控制方式和普通 div 一致，但受伪元素限制：不能有子节点、不能响应事件、无法用 JS 获取尺寸（除非 getComputedStyle）。
- 粗细 → 改
width（竖线）或height（横线），不是border-width - 颜色 → 用
background-color最稳妥；border-color也可，但要确保有border-style - 左右/上下留白 → 调整
left/right或top/bottom，配合position: absolute - 圆角分隔线？加
border-radius: 2px即可，前提是用background或border实现
多个元素共用一条长分隔线，::after 还适用吗？
不推荐。比如「导航栏所有 li 共享一条底部横线」，若每个 li::after 都画一段，容易错位、重叠或漏画。应改由父容器统一绘制。
立即学习“前端免费学习笔记（深入）”；
.nav-list {
position: relative;
}
.nav-list::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: #e0e0e0;
}
- 父级
::after只需一次声明，避免重复渲染和定位误差 - 若子项有
margin或padding，需确认是否影响父容器宽度计算（比如 box-sizing 或 flex 布局） - 绝对定位的伪元素不会触发父容器 BFC，遇到浮动内容可能错位，必要时加
overflow: hidden或clear: both
content 的存在感——它不像其他 CSS 属性那样“看得见”，但缺了它，整个伪元素就不存在。另外，position: absolute 下的偏移值依赖父元素是否设置了 position: relative，这点查起来也费时间。 
