html - 在导航栏链接下绘制下划线

Question

希望在链接下方显示绿色下划线。这是我目前的 CSS 和 HTML:

HTML:

<ul class="navbar-nav ml-auto">
    <li class="nav-item {% if nbar == 'about' %}active{% endif %}">
        <a class="nav-link js-scroll-trigger" href="{% url 'about' %}" id="navlink">About Us</a>
    </li>
    <li class="nav-item {% if nbar == 'login' %}active{% endif %}">
        <a class="nav-link js-scroll-trigger" href="{% url 'login' %}" id="navlink">Log In</a>
    </li>
</ul>

CSS:

.active {
    position: relative;
    height: 2px;
    background-color: #4EBA6F;
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

有什么想法吗？

Answer 1

你可以在之后做。请注意，您需要在 .nav-item

上添加 position: relative;

.nav-item {
  position: relative;
}

.active:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #4EBA6F;
}