CSS如何制作带分割线的并排链接_在a标签后使用::after添加|符号并清除最后一个-css教程-PHP中文网

要让链接间竖线正常显示且最后一个不出现，需用 a:not(:last-child)::after { content: "|"; margin-left: 8px; display: inline-block; vertical-align: middle; }，并确保父容器 white-space: nowrap、a 有足够 padding 且无 overflow: hidden。

css如何制作带分割线的并排链接_在a标签后使用::after添加|符号并清除最后一个

为什么 `::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）对齐，而文字和伪元素的基线位置不同步。尤其在行高较小或用了非默认字体时特别明显。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

给 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; }