a::after{content:"|";}a:last-child::after{content:"";}

本文深入解析了如何用CSS伪元素`::after`为导航链接添加竖线分隔符并精准控制其显示逻辑，重点解决了“最后一个链接不显示竖线”“竖线错位挤占空间”“移动端点击热区过小”等高频痛点；通过`a:not(:last-child)::after`的正确写法替代无效的`content: ""`覆盖方案，结合`display: inline-block`、`vertical-align: middle`、`white-space: nowrap`及合理`padding`/`margin`设置，确保竖线对齐美观、布局稳定、响应可靠，尤其适配动态渲染场景与移动交互需求。

为什么 ::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。没有它，窄屏下链接+竖线依然会折行——而这个属性不会影响内容语义，只管渲染行为。

到这里，我们也就讲完了《a::after{content:"|";}a:last-child::after{content:"";}》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！