How can I make the element stay in its place with CSS when hovering

Don't use an outline for this. Instead, lower the left padding by the amount the border adds.

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>

This is how you have it right now. The padding-left is 30px and on :hover the border-left adds 5px. So just subtract the border-left width from the padding-left width:

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>

Edit:

Since you provided some code now, just change it to this:

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