要让链接间竖线正常显示且最后一个不出现，需用 a:not(:last-child)::after { content: "|"; margin-left: 8px; display: inline-block; vertical-align: middle; }，并确保父容器 white-space: nowrap、a 有足够 padding 且无 overflow: hidden。
为什么 ::after 加竖线后链接挤成一团或换行了
默认情况下 a 是内联元素，::after 生成的内容也按内联处理，但一旦加了 content: "|"，浏览器会把它当普通文本渲染——如果父容器宽度不够，就可能折行或撑开间距。更关键的是，::after 不会自动“避开”最后一个元素，得手动拦截。
- 确保所有
a外层用display: flex或display: inline-block控制布局，别依赖纯内联流 -
::after必须设display: inline-block（哪怕只是一根竖线），否则在某些浏览器里对齐异常 - 竖线默认有左右空白，用
margin-left: 8px比直接写" | "更可控
怎么让最后一个链接不显示 |
不能靠 JS 判断“是不是最后一个”，CSS 里最稳的方式是用 :not(:last-child) 限定伪元素生效范围。很多人写成 a::after 然后试图在 :last-child 里 content: ""，这不行——伪元素的 content 无法被后续规则“清空”，只能从源头上不生成。
- 正确写法：
a:not(:last-child)::after { content: "|"; margin-left: 8px; } - 错误写法：
a::after { content: "|"; } a:last-child::after { content: ""; }（后者无效） - 如果链接是动态插入的（比如 Vue/React 渲染），确保父容器的 HTML 结构始终是连续的
a标签，中间别混入空文本节点或注释，否则:last-child可能选错
vertical-align 不设会出什么问题
竖线经常比文字高半截、下沉、或贴顶，这不是字体问题，是 ::after 默认按基线（baseline）对齐，而文字和伪元素的基线位置不同步。尤其在行高较小或用了非默认字体时特别明显。
- 给
a::after加vertical-align: middle或vertical-align: -0.125em（微调常用值） - 如果链接本身设置了
line-height，竖线的vertical-align建议用text-bottom或0.2em这类相对单位，避免硬写像素值 - 不要给
a设overflow: hidden，它会把::after的部分裁掉——尤其是竖线带上下留白时
移动端点击区域太小怎么办
纯文字链接 + 竖线，手指点上去容易误触或点不中，尤其竖线本身没点击热区。这不是视觉问题，是交互缺陷。
立即学习“前端免费学习笔记（深入）”；
- 给
a加padding: 4px 8px扩展可点区域，比改font-size更安全 - 竖线用
margin-left而不是padding-left，否则会影响整个链接的热区形状 - 如果需要响应式（比如小屏改横排为竖排），别只靠
@media改flex-direction，记得同步关掉::after：在断点里加a::after { display: none; }
white-space: nowrap。没有它，窄屏下链接+竖线依然会折行——而这个属性不会影响内容语义，只管渲染行为。 
