the animation dosent work for some reason ( im using normalize dont know if it have an effect a default start ) i copied the code but it didnt work for me its second project im rly a real beginner so any advise is welcome
thanks in advance^^

 */ html */
          <nav>
            <a href="./index.html"
              ><img src="./eduford_img/logo.png" alt="Uni logo"
            /></a>
            <div class="nav-links">
              <ul>
                <li><a href="./index.html">Home</a></li>
                <li><a href="./about.html">About</a></li>
                <li><a href="./course.html">Course</a></li>
                <li><a href="./blog.html">Blog</a></li>
                <li><a href="./contact.html">Contact</a></li>
              </ul>
            </div>
          </nav>
    */ css */
    nav {
      display: flex;
      padding: 2% 6%;
      justify-content: space-between;
      align-items: center;
    }
    nav img {
      width: 150px;
    }
    .nav-links {
      flex: 1;
      text-align: right;
    }
    .nav-links ul li {
      display: inline-block;
      position: relative;
      padding: 8px 12px;
    }
    .nav-links ul li a {
      color: #fff;
      font-size: 16px;
      text-decoration: none;
    }
    .nav-links ul li a ::after {
      content: "";
      width: 0%;
      height: 2px;
      background: var(--primary-400);
      display: block;
      margin: auto;
      transition: var(--transition);
    }
    .nav-links ul li:hover::after {
      width: 100%;
    }

CodePudding user response：

Since you put the ::after on the <a> element, you need .nav-links ul li:hover a::after, not .nav-links ul li:hover::after:

 */ html */
          <nav>
            <a href="./index.html"
              ><img src="./eduford_img/logo.png" alt="Uni logo"
            /></a>
            <div class="nav-links">
              <ul>
                <li><a href="./index.html">Home</a></li>
                <li><a href="./about.html">About</a></li>
                <li><a href="./course.html">Course</a></li>
                <li><a href="./blog.html">Blog</a></li>
                <li><a href="./contact.html">Contact</a></li>
              </ul>
            </div>
          </nav>
    */ css */
    nav {
      display: flex;
      padding: 2% 6%;
      justify-content: space-between;
      align-items: center;
    }
    nav img {
      width: 150px;
    }
    .nav-links {
      flex: 1;
      text-align: right;
    }
    .nav-links ul li {
      display: inline-block;
      position: relative;
      padding: 8px 12px;
    }
    .nav-links ul li a {
      color: #fff;
      font-size: 16px;
      text-decoration: none;
    }
    .nav-links ul li a::after {
      content: "";
      width: 0%;
      height: 2px;
      background: var(--primary-400);
      display: block;
      margin: auto;
      transition: var(--transition);
    }
    .nav-links ul li:hover a::after {
      width: 100%;
    }

An example with a few modifications so that it works on this site:

    body {
    background: black
    }
    nav {
      display: flex;
      padding: 2% 6%;
      justify-content: space-between;
      align-items: center;
    }
    nav img {
      width: 150px;
    }
    .nav-links {
      flex: 1;
      text-align: right;
    }
    .nav-links ul li {
      display: inline-block;
      position: relative;
      padding: 8px 12px;
    }
    .nav-links ul li a {
      color: #fff;
      font-size: 16px;
      text-decoration: none;
    }
    .nav-links ul li a::after {
      content: "";
      width: 0%;
      height: 2px;
      background: red;
      display: block;
      margin: auto;
      transition: width 0.5s;
    }
    .nav-links ul li:hover a::after {
      width: 100%;
    }
```

          <nav>
            <a href="./index.html"
              ><img src="./eduford_img/logo.png" alt="Uni logo"
            /></a>
            <div class="nav-links">
              <ul>
                <li><a href="./index.html">Home</a></li>
                <li><a href="./about.html">About</a></li>
                <li><a href="./course.html">Course</a></li>
                <li><a href="./blog.html">Blog</a></li>
                <li><a href="./contact.html">Contact</a></li>
              </ul>
            </div>
          </nav>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>