CSS：后跟图标：悬停使框更大

Question

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

附加图标将始终使导航栏摆放＆＃34;摆动＆＃34;在:hover上，因为图标的框大于列表项的框。我可以看到是什么导致了这个问题，但我还不够精确，无法提出修复方法。顺便说一句：在这种情况下，使图标变小不是理想的选择......

＆＃13;

＆＃13;

* {
  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;'
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

建议有人吗？我相信这对你们来说是个快速解决方法。

非常感谢提前！

Answer 1

在悬停时设置line-height to 0。这样可以解决问题。这是代码

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