直接用 p::before 加斜杠会多出开头斜杠，因伪元素在首段前插入；应改用 p:not(:first-child)::before 并设 margin-right: 0.5em 和 line-height: 1、vertical-align: middle 确保间距与垂直居中。
为什么直接用 ::before 给每个段落加斜杠会多出一个？
因为 ::before 是在元素内容「之前」插入，如果对所有 p 都写 p::before { content: "/"; }，第一个段落前就会凭空多一个斜杠，变成“/第一段/第二段/第三段”——开头那个“/”毫无意义，还破坏语义。
真正要的，是「段落之间」的分隔符，不是「段落之前」的装饰。所以必须排除首段，只作用于后续段落。
- 正确选择器是
p:not(:first-child)::before，不是p::before -
:not(:first-child)在 IE8 及更早版本不支持，若需兼容，得改用类名控制（如给后几个p加class="sep"） - 伪元素默认是 inline 级，
content: "/"不会自动换行或留空，紧贴文字会显得拥挤
怎样让斜杠和文字之间有合理间距？
靠 content 里塞空格（比如 content: " / ";）不可靠：HTML 会压缩连续空白，不同字体下空格宽度也不一致。
更稳的方式是用 margin 控制视觉距离：
立即学习“前端免费学习笔记（深入）”；
- 给
::before加margin-right: 0.5em;（右侧留白），适用于斜杠在前的场景（如「/第二段」） - 若斜杠在后（如「第一段/」），则用
margin-left: 0.5em;并配合p:not(:last-child)::after - 避免用
padding，它会撑开伪元素自身尺寸，可能干扰行高或垂直对齐
如何确保斜杠垂直居中、不上下偏移？
默认情况下，/ 是普通字符，其基线（baseline）与文字对齐，但斜杠本身偏高，容易看起来“浮起来”。这不是 bug，是字体度量决定的。
解决方法很简单，且无需复杂 transform：
- 给伪元素设
line-height: 1;和vertical-align: middle;，能快速拉平视觉位置 - 如果仍偏高，可微调
margin-top: -0.1em;（负值慎用，仅限必要时） - 别用
position: relative; top: -2px;—— 它依赖像素值，响应式下易失效
要不要用渐变或三角形实现图形化斜杠？
可以，但没必要。纯文本斜杠（content: "/";）在绝大多数场景下已足够：轻量、可选中、无障碍友好、缩放不失真。
只有当设计明确要求「非字符斜杠」（如带阴影、倾斜角度非 45°、两端带圆点等）时，才考虑其他方案：
- 用
linear-gradient拼接斜线：兼容性好，但本质是背景图，无法被屏幕阅读器识别 - 用
border+transform: rotate()画三角形：代码略重，且需固定宽高 - 所有图形化方案都绕不开一个事实：它们不再是语义化的分隔符，只是视觉装饰
真正容易被忽略的，是伪元素必须声明 content（哪怕为空字符串 content: "";），否则根本不会渲染——这个空值不是可选项，是硬性前提。
