How to Create Bottom Bordered Navigation Links with CSS

As a web developer, you want your website to look clean, simple and professional.

One way to achieve this is by adding a border to your navigation links.

In this tutorial, we’ll show you how to create a bottom bordered navigation bar using CSS.

Step 1: HTML Markup

Let’s start by creating the HTML structure for our navigation bar.

Add the following code to your HTML file:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Step 2: Add Basic Styling

Next, let’s add some basic styling to our navigation bar. Add the following code to your CSS file:

nav {
  width: 100%;
  background-color: #333;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

nav ul li {
  display:inline-block;
  background-color: #333;
  width: 25%;
  text-align: center;
}

nav a {
  display: block;
  padding: 0 10px;
  color: #fff;
  font-size: 20px;
  line-height: 60px;
  text-decoration: none;
}

Step 3: Add Bottom Border

Finally, let’s add a bottom border to our navigation links. Add the following code to your CSS file:

nav a:hover,
nav a:active {
background-color: #5f5f5f;
}

nav a::after {
content: "";
display: block;
height: 5px;
background-color: #fff;
position: absolute;
bottom: 0;
width: 0%;
transition: all ease-in-out 250ms;
}

nav a:hover::after {
width: 100%;
}

And that’s it! You now have a bottom bordered navigation bar.

You can customize the styling to your liking by changing the border color, height, background color, and other CSS properties.