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

【问题标题】：removing last element created by ::after pseudo-element删除 ::after 伪元素创建的最后一个元素
【发布时间】：2014-12-10 09:36:48
【问题描述】：

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

【问题讨论】：

您可以使用最后一个子选择器。不确定它是否适用于伪元素，我会尝试创建一个小提琴。

标签： html css pseudo-element

【解决方案1】：

或者，您可以使用一段简单的 CSS2 代码：

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

您不必担心最后一个。优雅、兼容。

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

【讨论】：

【解决方案2】：

有点长，但有效：

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

或

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

Codepen

【讨论】：

【解决方案3】：

是的

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

jsfiddle

【讨论】：

【解决方案4】：

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

negation CSS 伪类 :not(X) 是一种功能符号将一个简单的选择器 X 作为参数。它匹配一个元素不是由参数表示的。 X 不能包含另一个否定选择器。

:not 伪类的特殊性是其参数的特殊性。 :not 伪类不会添加到选择器与其他伪类不同。

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

简单来说，它不会为:last-child添加样式

【讨论】：

请解释一下您的 CSS 规则的作用。