css-之后。如何隐藏最后一个伪元素

Question

我有一个页脚有 <ul>与 6 <li>

body {background:#bbb;}

.main-footer a::after {
  content: " | ";
  color: white;
  margin: 0 25%;
}

<footer class="main-footer">
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">quienes</a></li>
    <li><a href="#">servicios</a></li>
    <li><a href="#">portfolio</a></li>
    <li><a href="#">sucursales</a></li>
    <li><a href="#">contacto</a></li>
  </ul>
</footer>

我需要删除最后一个“|”，但我不知道如何。

Answer 1

使用 li:not(:last-child)。

body {background:#bbb;}

.main-footer li:not(:last-child) a::after {
  content: " | ";
  color: white;
  margin: 0 25%;
}

<footer class="main-footer">
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">quienes</a></li>
    <li><a href="#">servicios</a></li>
    <li><a href="#">portfolio</a></li>
    <li><a href="#">sucursales</a></li>
    <li><a href="#">contacto</a></li>
  </ul>
</footer>