html - 将鼠标悬停在链接上时，想要在不移动边框的情况下向左移动链接

Question

我想弄清楚是否有办法在将鼠标悬停在链接上而不移动其边框的情况下移动链接。我希望我的链接向左移动，但我不希望我放置的边框也随之移动。这是我在说什么的 fiddle 。如果将鼠标悬停在任何链接上，您会看到边框随之移动，我想知道是否可以不移动边框。

代码如下:

.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>

有人有什么想法吗？

Answer 1

你可以放一个<span>链接标签中的标签，然后将转换应用到 <span>

https://jsfiddle.net/DIRTY_SMITH/n4Lsrv3k/2/

HTML

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

CSS

span: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;
}