html - 悬停时如何使元素与 CSS 保持原位

Question

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

像这样:-

过渡前

过渡后

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

&--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;
        }
      }
    }

Answer 1

不要为此使用大纲。相反，将左填充降低边框添加的量。

li {
  width: 300px;
  padding: 20px 30px;
  list-style: none;
  background: yellow;
  border-bottom: 1px solid black;
}

li:hover {
  border-left: 5px solid red;
}

<li>Test</li>
<li>Test2</li>

这就是您现在拥有的方式。 padding-left 是 30px 并且在 :hover 上 border-left 添加了 5px。所以只需从 padding-left 宽度中减去 border-left 宽度:

li {
  width: 300px;
  padding: 20px 30px;
  list-style: none;
  background: yellow;
  border-bottom: 1px solid black;
}

li:hover {
  border-left: 5px solid red;
  padding-left: 25px;
}

<li>Test</li>
<li>Test2</li>

编辑:

既然你现在提供了一些代码，就把它改成这样:

&--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;
          padding-left: calc(2rem - 5px); //<-- I added this line of code
        }
        &-link {
          color: $color-black;
          text-decoration: none;
        }
      }
    }