Html 防止文本在悬停或处于活动状态时发生双像素移动？

我正在创建一个基本菜单，并尝试在活动或悬停时显示两个像素宽的左块。问题是，我的文本在激活或悬停时向右移动了两个像素

我创建这个来展示这个问题

我的css如下所示：

#sidebar {
  height: 100%;
  padding-right: 0;
  padding-top: 20px;
}

#sidebar .nav {
  width: 95%; 
}

#sidebar li {
}

#sidebar .nav>.active>a, #sidebar .nav>.active:hover>a, #sidebar .nav>.active:focus>a {
  font-weight: 700;
  color: #563d7c;
  background-color: transparent;
  border-left: 2px solid #563d7c;
}

#sidebar .nav>li>a:hover, #sidebar .nav>li>a:focus {
  font-weight: 700;
  color: #563d7c;
  background-color: transparent;
  border-left: 2px solid #563d7c;
}

你知道当鼠标悬停在菜单项上或选中它时，如何防止文本向右移动吗

谢谢， -保罗

只需添加一个

border-left: 2px solid transparent;

用于正常状态下的链接。
在

：悬停

时，您只需更改

边框颜色

属性（您也可以通过简单的css转换平滑地更改颜色）

---

基本示例：

转换示例：

只需添加一个

border-left: 2px solid transparent;

用于正常状态下的链接。
在

：悬停

时，您只需更改

边框颜色

属性（您也可以通过简单的css转换平滑地更改颜色）

---

基本示例：

过渡示例：

---

最好的方法是，还有其他方法，比如乱丢利润等，但这是一个更好的方法。这就是我所缺少的。谢谢最好的方法是，还有其他的方法，像是弄乱保证金等等，但这是一个更好的方法。这就是我错过的。谢谢