根据：first-child和：last-child应用：before：after

Question

我正在尝试创建一条垂直时间轴，并在矩形细线上画圆，用户可以单击以显示更多信息。

我的方法是在每个在按钮上方和下方延伸矩形线的圆（跨度）具有：before和：after。但是对于列表/时间轴中的第一个（顶部）元素，我只想应用：after，因此该行延伸到第一个圆圈以下。反之亦然，最后一个圆圈。

html ：

<ul
  class="menu">
  <li>
    <a
      @click="onClick">
      <div class="text-container">
        <p>AAA</p>
        <p>AAA</p>
      </div>
      <span></span>
    </a>
  </li>
  <li>
    <a
      @click="onClick">
      <div class="text-container">
        <p>BBB</p>
        <p>BBB</p>
      </div>
      <span></span>
    </a>
  </li>
  <li>
    <a
      @click="onClick">
      <div class="text-container">
        <p>CCC</p>
        <p>CCC</p>
      </div>
      <span></span>
    </a>
  </li>
</ul>

无礼：

  span
  span::before
    content: ""
    position: absolute
    right: 22px
    bottom: 25px
    height: 75px
    width: 6px
    background-color: lightgrey
  span::after
    content: ""
    position: absolute
    right: 22px
    height: 75px
    width: 6px
    background-color: lightgrey

  span:first-child
  span::after
    content: ""
    position: absolute
    right: 22px
    height: 75px
    width: 6px
    background-color: lightgrey

  span:last-child
  span::before
    content: ""
    position: absolute
    right: 22px
    bottom: 25px
    height: 75px
    width: 6px
    background-color: lightgrey