Css 带自定义三角形的引导4个选项卡，激活时文本向左移动几个像素，为什么？

我有一些Boostrap标签，并在底部用CSS制作了一个三角形

一切看起来都很完美，但当选项卡处于活动状态时，链接文本会稍微向左移动，我不明白为什么

问题似乎是左右边框线，好像我把它们注释掉了，文本不会移动

我添加了一个片段，以便您可以自己查看

有什么想法吗？谢谢

a.nav-link.active:之后{
内容：“；
宽度：0；
身高：0；
位置：相对位置；
底部：-50px；
左-10%；
右边框：15px实心透明；
左边框：15px实心透明；
边框顶部：15px实心#343a40；
}

...
...
...

使用透明边框毫无意义。 如果要从左到右留出一些空间，只需使用填充或边距： 以下是如何使用它的内容： 以下是保证金的含义以及如何使用保证金：

---

文本不会向左移动，而是以选项卡本身的宽度居中，因此当一个选项卡变小时，文本将找到选项卡的中心。当账单变大时，同样的事情也会发生。也许您可以使所有3个选项卡的大小相同，即使处于活动状态，文本也不会再移动。

但是如果我没有左边框和右边框添加15像素，则上边框的宽度为0像素，我尝试向上边框添加填充或边距，但找不到方法。