伪元素在Chrome中具有额外的高度

Question

我正在尝试在列表项上添加一个“浮动”分隔符。所谓浮动，是指我使用伪元素来渲染边框，如果不特别设置高度，则边框不会影响高度。

我创建了一个代码段，该代码段可以在SO上正常工作。但是，当直接在Chrome中查看时，红色边框下方出现一条蓝线。我将背景设置为蓝色，以便可以看到它。

因此，正在发生的是伪元素的高度增加了1px。我已经尽一切努力将其从行高更改为字体大小-都无济于事。

有人遇到此问题并且知道解决方法吗？

.reset {
    background:transparent;
	  border-style: none;
    border-color: inherit;
    border-width: 0;
    margin: 0;
    padding: 0;
    font-size: 100%;
	  vertical-align: baseline;
    
    *, *::before {
      box-sizing: content-box;
    }
}

.container {
  margin: 50px;
}

ul {
  list-style: none;
}

li {
  position: relative;
}
li::before {
    background-color: blue;
    border-top: solid 1px red;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

a {
  display: block;
  height: 48px;
  line-height: 48px;
}

<div class="reset container">
<ul>
  <li><a>item 1</a></li>
  <li><a>item 2</a></li>
  <li><a>item 3</a></li>
</ul>
</div>