Bootstrap菜单最后一项hover下划线动画偏移问题求助

Got it, let's figure out how to fix that misaligned underline on your "Control Panel" nav item. The issue here is that your FontAwesome icon is attached to the <li> element instead of being part of the .nav-link—so the underline (which is tied to the link) doesn't account for the icon's space, making it look shifted right compared to other items.

Why Your Current Setup Causes the Problem #

Your underline animation targets the .nav-link, which sits after the icon you added to the <li>:before. When you hover, the underline scales to fit just the link text, but since the icon is part of the list item but not the link, the visual alignment is off.

Best Solution: Move the Icon Inside the .nav-link #

This is the cleanest approach because it keeps the icon and text as part of the same link element—so the underline will naturally cover both, maintaining the centered animation.

1. First, delete your existing icon CSS:

.navbar li:last-of-type:before {
  font-family: FontAwesome;
  content: "\F023";
  float: left;
  margin-top: 8px;
}
.navbar li:nth-last-child(2) {
  margin-right: 15px;
}

2. Update your HTML for the "Control Panel" item to include the icon inside the link:

<li class="nav-item">
  <a class="nav-link" href="#">
    <i class="fa fa-lock"></i> Control Panel
  </a>
</li>

3. Add a tiny bit of CSS to space the icon from the text:

.navbar-light .navbar-nav .nav-link i {
  margin-right: 8px;
}

Now when you hover, the underline will scale across the entire link (icon + text) and stay perfectly centered, matching the behavior of all other nav items.

Alternative: Adjust Underline Position for the Last Link #

If you really want to keep the icon on the <li> element, you can target the last .nav-link specifically to shift and extend its underline. Here's how:

/* Keep your original underline CSS, then add this */
.navbar-light .navbar-nav .nav-item:last-child .nav-link:before {
  /* Adjust these values to match your icon's width + margin */
  left: -28px; /* Shift the underline left to cover the icon */
  width: calc(100% + 28px); /* Extend width to include the icon's space */
}

You'll need to tweak the 28px value to match the actual width of your lock icon plus any margin you've added. This will make the underline look centered relative to the entire list item instead of just the link text.

Why Your Previous Attempt Didn't Work #

When you tried targeting the last .nav-link before, you probably didn't account for the fact that the icon lives outside the link element. The underline's left and width are relative to the .nav-link, so you need to offset them to include the icon's space in the parent <li>.

内容的提问来源于stack exchange，提问作者Shaun Taylor