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>

Answer 2

这应该做到：

.main-footer li:last-of-type a::after {
   display: none;
}

您基本上只需要定位li:last-of-type a，并隐藏其伪元素。

Answer 3

这应该有效：

.main-footer li:last-of-type a::after {
  display: none;
}

Answer 4

只需在 CSS 下面添加即可解决您的问题。谢谢

.main-footer li:last-child a::after {
  display: none;
}

body {background:#bbb;}

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

.main-footer li:last-child a::after {
  display: none;
}

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