Html 当鼠标悬停时，如何使用CSS使元素保持在原来的位置

我有一个元素，当我想悬停在它上面时。它显示我想要的边框，但是，它所做的是缩放文本并实际移动它

像这样：-

过渡前

过渡后

正如您在图片中看到的，“关于我们”在悬停后向左移动了一点，这是因为边界。我怎样才能让它保持原样？ 这是我的密码

&--dropdown {
      list-style: none;
      position: absolute;
      width: 25rem;
      height: 14rem;
      background-color: $color-additional;
      overflow: hidden;

      &-item {
        position: relative;
        width: 34rem;
        padding: 1rem 0 1rem 2rem;
        transition: all ease 0.2s;
        &:not(:first-of-type) {
          border-top: 1px solid $color-navigation-border;
        }
        &:hover {
          background-color: $color-white;
          border-left: 5px solid $color-primary;
        }
        &-link {
          color: $color-black;
          text-decoration: none;
        }
      }
    }

---

不要为此使用

大纲。取而代之的是，将左侧填充降低边框添加的量


li{
宽度：300px；
填充：20px 30px；
列表样式：无；
背景：黄色；
边框底部：1px纯黑；
}
李：悬停{
左边框：5px纯红；
}
测试
Test2
不要为此使用
大纲。取而代之的是，将左侧填充降低边框添加的量


li{
宽度：300px；
填充：20px 30px；
列表样式：无；
背景：黄色；
边框底部：1px纯黑；
}
李：悬停{
左边框：5px纯红；
}
测试
Test2
请注意：这是解决此问题的众多解决方案之一

您可以为两种状态（初始状态和
：hover
）定义边界。在初始状态下，边框颜色应设置为与项目背景颜色相同，可在
悬停状态下更改

&-item {
    border-left: 5px solid <your_bg_colour>;
    &:hover {
      border-left-color: <hover_state_colour>;
    }
  }

&-item{
左边框：5px实心；
&：悬停{
左边框颜色：；
}
}
请注意：这是解决此问题的众多解决方案之一

您可以为两种状态（初始状态和
：hover
）定义边界。在初始状态下，边框颜色应设置为与项目背景颜色相同，可在
悬停状态下更改

&-item {
    border-left: 5px solid <your_bg_colour>;
    &:hover {
      border-left-color: <hover_state_colour>;
    }
  }

&-item{
左边框：5px实心；
&：悬停{
左边框颜色：；
}
}
通过添加代码来澄清您是否尝试使用
大纲
属性，而不是
边框
？或者将属性
框大小设置为
边框框
。浏览一下您的代码将在这里有所帮助。另一种方法是，无论元素是否悬停，在初始状态下永久添加边框，并将边框颜色设置为背景色。@AkshitMehra，开始了。代码是added@AkshitMehra
outline
不是一个好主意，
box size:border box
不起作用。不过，您的最后一种方法是有效的。感谢@Aaron3219的纠正！您发布的答案将非常有效。通过添加代码来澄清您是否尝试使用
大纲
属性，而不是
边框
？或者将属性
框大小设置为
边框框
。浏览一下您的代码将在这里有所帮助。另一种方法是，无论元素是否悬停，在初始状态下永久添加边框，并将边框颜色设置为背景色。@AkshitMehra，开始了。代码是added@AkshitMehra
outline
不是一个好主意，
box size:border box
不起作用。不过，您的最后一种方法是有效的。感谢@Aaron3219的纠正！你贴出的答案会很有效。没问题；）。还要注意Akshit Mehra的回答，因为它也会起作用。只要决定你要用什么就行了。没问题；）。还要注意Akshit Mehra的回答，因为它也会起作用。只要决定你想用什么就行了。刚才使用了@Aaron3219的第一个解决方案，谢谢。不管怎样，刚才使用了@Aaron3219的第一个解决方案，谢谢