html - 悬停在链接上时，希望将链接向左移动而不移动边框

Question

我试图弄清楚是否有办法在将鼠标悬停在链接上时移动链接而不移动其边界。我希望我的链接向左移动，但我不希望我放置的边框随之而来。这是我正在谈论的内容。如果您将鼠标悬停在任何链接上，您会看到边框随之移动，我想知道是否可以不移动边框。

这是代码：

.links {
  width: 240px;
  margin-left: -35px;
  text-align: right;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: bold;
  padding: 20px;
  display: block;
}

.links a {
  border-bottom: 1px solid rgba(117, 117, 117, 0.3);
  display: block;
  padding: 8px;
}

.links a:hover {
  border-bottom: 1px solid rgba(207, 166, 255, 0.5);
  font-style: italic;
  margin-right: 10px;
  font-weight: none;
  transition: 0.8s;
  -webkit-transition: 0.8s;
  -moz-transition: 0.8s;
  -o-transition: 0.8s;
}

<div class="links">
  <a href="/">link</a>
  <a href="/">link</a>
  <a href="/">link</a>
  <a href="/">link</a>
  <a href="/">link</a>
</div>

有没有人有任何想法？

标签： htmlcsshoverbordermargin

Answer 1

.links a:hover用以下代码替换样式。

.links a:hover {
  font-style: italic;
  padding-right: 20px;
  transition: 0.8s;
  -webkit-transition: 0.8s;
  -moz-transition: 0.8s;
  -o-transition: 0.8s;
}