悬停效果小于元素吗？

Question

我目前正在尝试使用Bootstrap在导航栏中的“字体真棒”图标上悬停效果。问题是，当我将鼠标悬停时，我希望有一个比我的元素小的圆。

例如，我的元素的宽度为48像素，我想以40像素为界，但是我不知道该怎么做。

我尝试使用边框（透明）和伪类（之前），但是圆没有正确居中，我认为这种解决方案很难看。这是我的代码：

a.nav-link:before {
    content: "";
    display: block;
    position: absolute;
    background-color: transparent;
    width: 14px;
    height: 14px;
}

a.nav-link:hover:before {
    content: "";
    display: flex;
    position: absolute;
    background-color: red;
    border-radius: 50%;
    width: 28px;
    height: 28px;
}

HTML：

    <ul class="navbar-nav navbar-menu">
        <li class="nav-item">
            <a class="nav-link" href="#">
                <i class="fas fa-home"></i>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">
                <i class="fas fa-envelope"></i>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">
                <i class="fas fa-bell"></i>
            </a>
        </li>
    </ul>

结果，您可以在红色圆圈后面看到Font Awesome图标（出于测试目的）：

想要的结果：

图标48px的圆圈悬停效果40px：

Answer 1

您可以尝试：

.nav-link {
  background-color: black;
  display: block;
  width: 40px;
  text-align: center;
  border-radius: 50%;
}
.nav-link:hover {
  background-color: grey;
}

这是演示：https://jsbin.com/sexonoc