HTML中如何在超链接之间添加分隔符 实现头部导航栏间隔效果

推荐方案：CSS伪元素实现（无冗余HTML） #

不需要修改HTML结构，所有分隔符逻辑由CSS统一管控，后期维护成本最低。

示例HTML结构 #

<header>
  <nav class="nav-container">
    <a href="/home">首页</a>
    <a href="/admin">管理后台</a>
    <a href="/help">帮助中心</a>
  </nav>
</header>

对应CSS代码 #

/* 导航容器基础样式，可根据需求自定义 */
.nav-container {
  padding: 12px 24px;
  background: #f0f0f0;
}
/* 导航链接基础样式 */
.nav-container a {
  margin: 0 10px;
  color: #222;
  text-decoration: none;
}
/* 除最后一个链接外，其余链接后插入分隔符 */
.nav-container a:not(:last-child)::after {
  content: "|";
  margin-left: 20px;
  color: #888;
  /* 可自定义分隔符的字号、粗细等属性 */
  font-size: 14px;
}

备选方案1：手动插入分隔符 #

适合静态导航场景，写法简单直观：

<header>
  <nav>
    <a href="/home">首页</a> |
    <a href="/admin">管理后台</a> |
    <a href="/help">帮助中心</a>
  </nav>
</header>

注意：如果是动态循环渲染导航，需要额外判断当前是否为最后一个链接，避免末尾多余出现分隔符

备选方案2：边框实现自定义高度分隔符 #

如果需要分隔符高度和导航栏匹配，或者需要调整分隔符间距，用边框方案更灵活：

.nav-container a:not(:last-child) {
  /* 可自定义边框颜色、粗细、右侧内边距调整分隔符位置 */
  border-right: 1px solid #888;
  padding-right: 20px;
}

内容的提问来源于stack exchange，提问作者Kamali Ragavan