如何将基于导航标签的导航栏与不属于 link 的分隔符一起使用

Question

我有兴趣使用导航标签代替 div>ul>li>a 用于水平导航菜单。

我能够获取导航栏并插入分隔符。

使用 div>ul>li>a 方法添加的分隔符不是 link 的一部分，因为它们是在 li 上添加的。

当我使用 nav>a 并插入分隔符时，它们作为 link.

的一部分包含在内

我试过：nav a:before:link{text-decoration: none;} 在 css 中，但这没有用。

另外 text-decoration:none 在 css 中添加我的分隔符也不起作用。

nav a:before {content: "|"; text-decoration: none;}

使用 nav>li>a 给我一个带有默认项目符号的垂直列表，这违背了使用导航标签的目的。

这是一个输出示例，您可以在其中看到“|”分隔符作为 link.

的一部分包含在内

意识到我上面列出的努力（没有奏效）只会删除下划线（而不是 link），即使它们奏效了。我想从分隔符中删除 link，但如果我只能删除下划线，我可能会解决这个问题。

Answer 1

这两个都有效：html（只需将分隔符直接放在导航栏中）

<nav>
  |<a href="s">dsa</a>|
  <a href="a">sdf</a>|
  <a href="d">rsd</a>|
</nav>

或者将分隔符放在 a 标签嵌套的 p 标签中：

CSS:

nav p{display: inline; margin-right:15px;}
nav a{margin: 10px}

与 html:

<nav>
   <p><a href="t">fdd</a></p>
   <p>|<a href="e">fdd</a></p>
   <p>|<a href="d">fss</a></p>
   <p>|<a href="d">gde</a></p>
</nav>

how to use a nav-tag-based nav-bar with seperators that are not part of the link