css - 将类属性定位到添加 :after

Question

我有 4 个链接并添加了“|”在每个链接之间。

.linkblock li a:after {content:" |"; white-space: pre;}

我曾经删除过“|”来自第一个工作的 child :

.linkblock li a:first-child:after {content:" "; white-space: pre;}

对于最后一个 child ，我已经尝试了很多，但最后一个 child 不起作用。最后一个使用:

.linkblock li a:nth-child(4):after  {content:" "; white-space: pre;}

但什么也没做。

有办法改变吗？

.linkblock li a:after {content: " |"; white-space: pre}
.linkblock li a:first-child:after {content: ""; white-space: pre}
.linkblock li a:nth-child(4):after {content: ""; white-space: pre}

<div class="linkblock float-left f15 ml-2">
  <ul>
    <li><span class="arrow" id="rotate"></span><a class="linkblockf"  href="#investment-platform">Client Platform</a></li>
    <li><span class="arrow" id="rotate"></span><a class="linkblockf" href="#golden-visa">Country Programmes</a></li>
    <li><span class="arrow" id="rotate"></span><a class="linkblockf" href="#ahimsa-investments">Ahimsa Investments</a></li>
  </ul>
</div>

Answer 1

使用更少和更干净的代码更简单的方法是将 li 定位在其他 li 之后(使用 相邻的兄弟组合器 或+) 以便自动排除第一个，并通过使用 :before 伪元素来代替，您甚至不必将最后一个作为目标来“隐藏"内容:

.linkblock li {
  display: inline-block;
}

.linkblock li + li:before {
  content: "|";
  white-space: pre;
}

<div class="linkblock float-left f15 ml-2">
  <ul>
    <li>
      <span class="arrow" id="rotate"></span>
      <a class="linkblockf" href="#investment-platform">Client Platform</a>
    </li>
    <li>
      <span class="arrow" id="rotate"></span>
      <a class="linkblockf" href="#golden-visa">Country Programmes</a>
    </li>
    <li>
      <span class="arrow" id="rotate"></span>
      <a class="linkblockf" href="#ahimsa-investments">Ahimsa Investments</a>
    </li>
  </ul>
</div>