伪元素实现的分隔线宽度无规律不一致问题求助

各位大佬好！我最近做网站的时候碰到了个头疼的小问题：用伪元素做的分隔线（用来模拟边框），宽度居然莫名其妙地不一样，看起来歪歪扭扭的，效果如图：

我整理了一个最小复现的代码，核心样式如下：

.filters {
  display: flex;
  border-radius: 3px;
  margin-bottom: 1rem;
  /* margin-bottom: 0; */
  width: fit-content;
  border: 1px solid black;
}

.filters>* {
  padding: 1em;
  position: relative;
}

.filters>*:not(:first-child)::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  height: 100%;
  width: 1px;
  background-color: black;
}

/* 我偶然试了一段代码居然解决了这个问题，但完全搞不懂原理... */
/* （代码还没写完，暂时标记为#na...） */

有没有朋友能帮我分析下为什么会出现这种分隔线宽度不一致的情况？还有我找到的这个临时解决方法到底是怎么起作用的呀？麻烦大家指点一下，万分感谢！

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