如何用纯CSS实现除最后一项外的列表项垂直线连接效果？

嘿，我完全懂你想要的效果——就是列表项左侧带圆点，除了最后一项，每个圆点下方都有垂直线连接到下一个圆点的样式对吧？当然可以用纯CSS搞定，不用再在JS里判断索引啦，给你两种简单的方案：

方案一：保留原有DOM结构，用CSS隐藏最后一项的竖线 #

你可以先把JSX里的条件判断去掉，让所有.circle都渲染<span>，然后用CSS的:last-child伪类直接隐藏最后一个列表项里的竖线：

修改后的HTML/JSX：

<div className='items'>
  {items.map((item, index)=>{
    return (
      <div className='item'>
        <div className='circle'>
          <span></span> 
        </div>
        {item}
      </div>
    )
  })}
</div>

更新后的CSS：

.item {
  position: relative;
  color: black;
}
.circle {
  border-radius: 50%;
  margin: auto;
  position: absolute;
  top: 0;
  left: -30px;
  bottom: 0;
  width: 11px;
  height: 11px;
  background-color: black;
}

.circle > span {
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -15px;
  width: 1px;
  height: 15px;
  background-color: red;
}

/* 关键：隐藏最后一个item里的竖线 */
.item:last-child .circle > span {
  display: none;
}

方案二：用CSS伪元素生成竖线，更简洁 #

这种方法可以去掉多余的<span>，直接用.circle的伪元素来生成竖线，DOM结构更干净：

修改后的HTML/JSX：

<div className='items'>
  {items.map((item)=>{
    return (
      <div className='item'>
        <div className='circle'></div>
        {item}
      </div>
    )
  })}
</div>

更新后的CSS：

.item {
  position: relative;
  color: black;
  /* 给每个item设置底部间距，让竖线有展示空间，可根据你的布局调整 */
  margin-bottom: 15px;
}
.circle {
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: -30px;
  width: 11px;
  height: 11px;
  background-color: black;
}

/* 给除最后一个item外的circle添加竖线伪元素 */
.item:not(:last-child) .circle::after {
  content: '';
  position: absolute;
  /* 让竖线居中对齐圆点 */
  left: 50%;
  transform: translateX(-50%);
  bottom: -15px; /* 和item的margin-bottom值对应 */
  width: 1px;
  height: 15px;
  background-color: red;
}

原理很简单：:not(:last-child)会选中所有不是最后一个的.item，只为它们的.circle添加竖线伪元素，自动排除最后一项，完全不需要JS参与样式判断，更符合前端开发的关注点分离原则~

备注：内容来源于stack exchange，提问作者agony