html - 如何在不移动链接位置的情况下在链接前设置一些空格？

Question

我需要在鼠标悬停在其当前位置之前 5 个像素处突出显示一个 div。也就是说，如果用户将指针移到它上面，div 将在 5 个像素之前突出显示，但不会改变其内容位置。

.container {
  width: 100%;
  &:hover {
    background-color: rgba(0, 0, 0, 0.1);
    position: relative;
    padding-left: 5px;
  }
}

<div class='container'>
  <a href='#'>Click me!</a>
</div>

将鼠标悬停在它上面会突出显示“点击我!”消息向右移动 5 个像素。我怎样才能做到这一点？

Answer 1

试试这个 SCSS

.container {
  width: 100%;

  &:hover {
    background-color: rgba(0, 0, 0, 0.1);
    position: relative;
    padding-left: 5px;
    a{
    margin-left:-5px;
     }
  }
}

Link for reference

希望这对您有帮助..