删除:: after伪元素后创建的最后一个元素

Question

我正在创建一个导航菜单,我正在使用::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解决方案.

Answer 1

或者,您可以使用简单的CSS2代码:

nav ul li + li:before {
   content: " | ";
}

而且你不必担心最后一个.优雅,兼容.

有时候,以正确的方式使用好的旧CSS选择器会更简单:)

Answer 2

有点长，但有效：

nav ul li:last-child::after { content:''; }

或者

nav ul li:last-child::after { display: none; }

代码笔