纯CSS实现响应式布局中仅行内链接间显示管道分隔符

这个问题我之前也碰到过，用:after伪元素加分隔符确实会踩换行后行尾留符号的坑，给你分享一个纯CSS的完美解决方案，完全不需要JS：

核心思路 #

把分隔符加到每个链接的前面，而不是后面，利用CSS相邻兄弟选择器+来控制：只有当前面已经有一个链接时，才在当前链接前显示分隔符。这样不管是同一行还是换行后的下一行，行首的链接因为前面没有兄弟元素，就不会出现多余的分隔符，行尾也自然不会有。

完整代码示例 #

HTML结构 #

<div class="link-group">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
  <a href="#">Link 5</a>
</div>

CSS样式 #

/* 用flex实现响应式换行，可控性更强 */
.link-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem; /* 控制链接之间的基础间距，避免margin折叠问题 */
}

/* 确保单个链接不会被拆成两行 */
.link-group a {
  white-space: nowrap;
  text-decoration: none;
  color: #2d7ff9;
}

/* 给前面有兄弟链接的元素添加前置分隔符 */
.link-group a + a::before {
  content: "|";
  color: #999;
  margin-right: 0.6rem; /* 分隔符与后面链接的间距，和gap保持一致 */
}

方案优势 #

• 彻底解决行首/行尾分隔符问题：a + a::before只会在有前置兄弟链接的元素前生成分隔符，完全适配自然换行的场景。
• 响应式友好：flex-wrap: wrap会自动根据视口宽度换行，无需额外媒体查询（如果需要更精确的换行断点，可以加媒体查询调整gap或容器宽度）。
• 间距可控：用gap代替margin管理链接间距，避免了inline元素的margin折叠问题，布局更稳定。

替代方案（自然流式布局） #

如果不想用flex，也可以用自然流式布局实现，只是需要注意间距的处理：

.link-group {
  width: 100%;
}

.link-group a {
  display: inline-block;
  white-space: nowrap;
  margin-right: 0.6rem;
  text-decoration: none;
  color: #2d7ff9;
}

.link-group a + a::before {
  content: "|";
  color: #999;
  margin-right: 0.6rem;
}

为什么原来的:after方案不行？ #

你之前用:after加分隔符，再用:last-child::after { content: none }，只能移除整个容器最后一个元素的分隔符，但换行后每行的最后一个元素并不是容器的:last-child，所以这些行尾的分隔符还是会保留，这就是问题的根源。而前置分隔符+相邻兄弟选择器的思路，刚好规避了这个问题。

内容的提问来源于stack exchange，提问作者Vincent Tschanz