html - 应用 :before :after 取决于 :first-child 和 :last-child

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

标签： htmlcsssass