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; }

Codepen

Answer 3

是的

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

jsfiddle

Answer 4

nav ul li:not(:last-child)::after{
  content: " | ";
}

否定 CSS伪类：不是（X），是一种功能表示法   以简单的选择器X为参数。它匹配一个元素   没有参数表示。 X不得包含另一个   否定选择器。

：not 伪类的特殊性是其参数的特异性。：not pseudo-class不会添加到选择器   特殊性，与其他伪类不同。

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

简单来说，它不会为:last-child

添加样式

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

4 个答案: