我有一个像这样的psd。

我想像https://www.khaneyeax.com/en/site一样创建，当我把鼠标放在链接上时，链接上会出现一个圆圈。 我用的是bootstrap 4.5。

CSS

.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .show > .nav-link {
    background-color: rgba(160,0,180,.5);
    opacity: 1;
    transform: scale(1);
}

ul.navbar-nav > li > a {
    padding: 60px 0 16px;
    display: block;
    text-align: center;
    position: relative;
    min-width: 110px;
    transition: all .3s ease-in-out;
}

ul.navbar-nav > li > a > i{
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    content: '';
    position: absolute;
    display: inline-block;
    transition: .3s ease-in-out;
    width: inherit;
    height: inherit;
    top: 20px;
    left: 0;
    font-size: 25px;
    right: 0;
    margin: auto;
}

ul.navbar-nav > li > a > span{
    font-size: 13px;
}

一个简单的html

<li class="nav-item active">
    <a class="nav-link" href="#">
        <i class="fas fa-th-large fa-2x"></i>
        <span>Home</span>
    </a>
</li>

我看到了这个演示。