Css 引导4导航链接悬停效果

我正在尝试将悬停效果仅定位于导航栏中的a链接（而不是前斜杠）。 但我似乎无法仅访问a链接，效果最终会沿着整个导航栏运行。 这里似乎与引导程序4有冲突

HTML

在这里拉小提琴

---

您应该将鼠标悬停在a-link上，然后将a-link位置：relative，或者将类位置放置在相对于a-link的位置

.nav-item a {
    position: relative;
}
.nav-item a:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    border-bottom: 1px solid black;
    transition: 0.4s;
}

.nav-item a:hover:after {
    width: 100%;
}

---

要解决此问题，不应在锚元素内放置分隔符。 下面是一种使用

content

属性消除额外HTML的方法。 这与Bootstrap的类似

但是你已经很熟悉了，首先要进行一些清理^^

• 从

  导航链路上拆下量程分离器

• 将跨度用于文本节点（可以方便地将动画放在那里）
• 将动画从

  ：after

  移动到

  ：before

  （从逻辑上讲，分隔符位于元素后面，可能除了最后一个子元素之外，这也会为您提供元素宽度，您现在可以在其中控制正确的位置。）
• 使用分隔符的

  ：after

• 为主导航提供全宽，并使用flexbox对齐其使用的空间（flex端点、中心、中间空间等）

HTML更改 如果要更改角色，则只有一个编辑位置

如果您想在不使用填充的情况下更改动画，我建议您使用

calc（）

来分散

nav链接的注意力

导航项目是否有
位置：相对
？首先开始添加
。导航项目{position:relative}
。当您使用
position:absolute
时，该元素定位到最近的父元素，该父元素已设置位置。谢谢！这几乎解决了问题。悬停效果现在以a链接为目标。建议如何避免针对a链接中包含正向斜杠的跨距？我也更新了小提琴。除非你把斜线移到
.nav item
标记之外，否则你真的无法避免。您的下划线位于悬停的
li
项上。所以，如果你看你的结构，你的斜线在元素里面。唯一可以做到这一点的方法是，如果您更改标记或使其成为CSS仅使after元素的宽度小于100%，但它可能不适用于所有linksI end upp，将斜杠移到nav item标记之外。谢谢。恐怕没有考虑到前斜杠。谢谢你，蒂姆！非常有用的回答。
.nav-item:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    border-bottom: 1px solid black;
    transition: 0.4s;
}

.nav-item:hover:after {
    width: 100%;
}

.nav-item a {
    position: relative;
}
.nav-item a:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    border-bottom: 1px solid black;
    transition: 0.4s;
}

.nav-item a:hover:after {
    width: 100%;
}

<div class="collapse navbar-collapse" id="navbarNav">
    <ul class="nav navbar-nav navbar-primary w-100 ml-auto">
        <li class="nav-item active">
            <a class="nav-link" href="#">
                <span>Home</span>
                <span class="sr-only">(current)</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#past-bookings"><span>Archive</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#"><span>About</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#subscribe"><span>Newsletter</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="mailto: hola@getmove.net"><span>Contact</span></a>
        </li>
    </ul>
    <ul class="nav navbar-nav navbar-secondary flex-row justify-content-center flex-nowrap">
        <li class="nav-item">
            <a class="nav-link nav-social-icon" target="_blank" href="https://www.facebook.com/GetMove.Official/"><i class="fa fa-facebook-square"></i></a>
        </li>
        <li class="nav-item">
            <a class="nav-link nav-social-icon" target="_blank" href="https://www.instagram.com/getmovemx/"><i class="fa fa-instagram"></i></a>
        </li>
        <li class="nav-item">
            <a class="nav-link nav-social-icon" target="_blank" href="https://soundcloud.com/getmove"><i class="fa fa-soundcloud"></i></a>
        </li>
    </ul>
</div>

.navbar-primary .nav-item:after {
    content: "/";
    position: absolute;
    top: 0.25rem;
    left: auto;
    right: -0.5rem; /* control the amount of space for the separator */
}

.navbar-primary .nav-item:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    border-bottom: 1px solid black;
    transition: 0.4s;
}

.navbar-primary .nav-item:hover:before {
    width: 100%;
} 

.navbar-primary .nav-link:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0.5rem; /* nav-link padding-left */
    width: 0%;
    border-bottom: 1px solid black;
    transition: 0.4s;
}

.navbar-primary .nav-link:hover:before {
    width: calc(100% - 1rem); /* minus nav-link padding left and right */
}