在Navbar链接下绘制下划线

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

你可以在之后做。请注意，您需要在position: relative;

上添加.nav-item

.nav-item {
  position: relative;
}

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

Answer 2

以ul { list-style: none; background:#8563d9; } li { display: inline-block; padding: 20px; } a { text-decoration: none; padding: 20px; display: inline-block; color:#fff; } .active { background-image:linear-gradient(to top,#4EBA6F 4px,transparent 0); }为背景，这是一个简单的想法：

＆＃13;

＆＃13;

<ul class="navbar-nav ml-auto">
  <li>
    <a class="nav-link js-scroll-trigger" href="#" id="navlink">About Us</a>
  </li>
  <li>
    <a class="active" href="#" id="navlink">Log In</a>
  </li>
</ul>

＆＃13;

#include <stdio.h>

int main()
{
    unsigned char myBytes[4] = { 0x01, 0x23, 0x45, 0xFF };
    for (int i = 3; i >= 0; i--) {
        // mBytes[i] is promoted to int and the sum is converted to unsigned char
        unsigned char newer = 1 + myBytes[i];
        if (myBytes[i] < newer) break;         // stop at first non overflow
        myBytes[i] = newer;
    }
    for (int i = 0; i < 4; i++) {
        printf("0x%02x ", myBytes[i]);
    }
    printf("\n");
    return 0;
}

＆＃13;

＆＃13;

＆＃13;