我正在创建一个导航菜单，并且正在使用::after伪元素，我想实现这一点：
主页| 关于| 文章| 个人项目
这是我的CSS代码：
nav ul li::after{
content: " | ";
}
这是我的HTML标记：
<nav class="wrapper">
<ul>
<li><a href="/">home</a></li>
<li><a href="/about.php">about</a></li>
<li><a href="/articles.php">articles</a></li>
<li><a href="/projects.php">personal projects</a></li>
</ul>
</nav>
一切都很好，除了在最后::after添加一个|（如预期的那样）
前任：
主页| 关于| 文章| 个人项目|
有什么办法，仅使用CSS来删除最后一个|？
我知道我可以使用Javascript，也可以将其添加到HTML中。我正在寻找纯CSS解决方案。
或者，您可以使用简单的CSS2代码：
nav ul li + li:before {
content: " | ";
}
而且您不必担心最后一个。优雅，兼容。
有时候，以正确的方式使用好的旧CSS选择器会更简单:)
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句