CSS :after-icon on :hover 使框变大

Question

我无法找出有关在导航栏中的 :after 伪 class 中添加 :hover 上的图标以列出项目的问题的解决方案。

附加图标将始终使导航栏 "wobble" 在 :hover 上，因为图标的框大于列表项的框。我可以看到导致问题的原因，但我还不够精通，无法提出解决方案。顺便说一句：在这种情况下，缩小图标不是理想的选择...

* {
  font-family: Verdana, sans-serif;
}

.nav {
  display: block;
  background: rgba(0,0,0,0.8);
}

.nav li {
  display: inline-block;
  list-style-type: none;
  padding: 10px;
  text-transform: uppercase;
}

.nav a {
  text-decoration: none;
  color: #fff;
}

.nav li:hover {
  cursor: pointer;
}

.nav a:hover:after {
  content: ' ⚒';
  font-size: 20px;
  padding-left: 5px;'
}

<div class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
  </ul>
</div>

有什么建议吗？我相信这对你们来说是一个快速修复。

非常感谢！

Answer 1

在 hover.That 上设置 line-height to 0 将修复 issue.Here 是代码

.nav {
  display: block;
  background: rgba(0,0,0,0.8);
}

.nav li {
  display: inline-block;
  list-style-type: none;
  padding: 10px;
  text-transform: uppercase;
}

.nav a {
  text-decoration: none;
  color: #fff;
}

.nav li:hover {
  cursor: pointer;
}

.nav a:hover:after {
  content: ' ⚒';
  font-size: 20px;
  line-height:0px;
}

<div class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
  </ul>
</div>

CSS :after-icon on :hover 使框变大

CSS :after-icon on :hover makes box bigger

css

hover

nav