如何使用 css 在我的垂直导航栏中添加底部边框？

Question

I am learning to code and can't seem to apply a 1px solid border-bottom under contact.

And if I do, the other bottom borders above become bolder as if they are double bordering.

 #navbar ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

#navbar li a {
  display: block;
  width: 60px;
  padding: 16px 32px;
  text-decoration: none;
  text-align: center;
  color: black;
  border: 1px solid black;
}

#navbar a:hover {
  background-color: black;
  color: white;
}

#navbar a:last-child {
  border-bottom: none;
}

<div>
      <ul id="navbar">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="models.html">Models</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div>

Answer 1

You need your last-child selector on the li element.

#navbar li a {
  display: block;
  width: 60px;
  padding: 16px 32px;
  text-decoration: none;
  text-align: center;
  color: black;
  border: 1px solid black;
  border-bottom: none; /* add this */
}

#navbar li:last-child a {
  border-bottom: 1px solid black;
}

See :last-child at css-tricks.com for more information