CSS Flex自动换行列表如何隐藏每行末尾元素后的装饰伪元素圆点

方案1：纯CSS实现（推荐，无JS依赖，适配所有换行场景） #

核心思路是把圆点从列表项右侧移动到左侧，通过父容器裁剪隐藏每行第一个列表项左侧的圆点，自动实现仅相邻项之间显示圆点的效果，无需判断换行逻辑。

1. 先确认你已经给<li>设置了position: relative;（你的绝对定位伪元素依赖这个属性，没加的话先补上）
2. 修改li::after的定位规则，把原来的右侧定位替换为左侧定位：

li::after {
  /* 保留你原来的其他样式不变，只修改right属性为下面的left属性 */
  /* right: -1.25em; 删掉这行 */
  left: calc(-1rem - 0.25em); 
  /* 1rem是你设置的水平gap(2rem)的一半，0.25em是圆点宽度(0.5em)的一半，保证圆点刚好在两个列表项中间 */
}

3. 给<ul>新增两个样式：

ul {
  overflow: hidden;
  padding-left: 1rem; /* 和上面计算式里的1rem数值保持一致 */
}

方案2：JS实现（无需修改原有伪元素定位逻辑） #

如果不想调整现有样式的定位规则，可以通过JS计算每个列表项的位置，给每行最后一个列表项加类隐藏圆点：

1. 新增CSS规则：

li.last-of-row::after {
  display: none;
}

2. 加入JS逻辑，页面加载和窗口尺寸变化时自动判断每行最后一个元素：

function adjustRowDots() {
  const items = document.querySelectorAll('ul li');
  if (!items.length) return
  let currentTop = items[0].offsetTop;
  let currentRow = [];

  items.forEach(item => {
    item.classList.remove('last-of-row');
    const itemTop = item.offsetTop;
    // 换到新行时给上一行最后一个元素加类
    if (itemTop !== currentTop) {
      currentRow.at(-1).classList.add('last-of-row');
      currentTop = itemTop;
      currentRow = [];
    }
    currentRow.push(item);
  });
  // 给最后一行的最后一个元素加类
  currentRow.at(-1).classList.add('last-of-row');
}

window.addEventListener('load', adjustRowDots);
window.addEventListener('resize', adjustRowDots);

内容的提问来源于stack exchange，提问作者rctneil