1. Home

How To - Bottom Border Nav Links

Learn how to create bottom bordered (underline) navigation links with CSS

Bottom Border Nav Links

Home News Contact
Try it Yourself »

Create A Navigation Menu

Step 1) Add HTML:

Example

<div class="topnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

Step 2) Add CSS:

Example

/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  border-bottom: 3px solid transparent;
}

.topnav a:hover {
  border-bottom: 3px solid red;
}

.topnav a.active {
  border-bottom: 3px solid red;
}
Try it Yourself »
Tip: To create mobile-friendly, responsive navigation bars, read our How To - Responsive Top Navigation tutorial.
Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars.

Categories

HTML CSS3 Bootstrap Foundation Sass JavaScript TypeScript JQuery AngularJS React NodeJS Highcharts PHP Python Python3 Django Linux Docker Ruby Java C C ++ Perl Servlet JSP Lua Scala Go ASP C # SQL MySQL SQLite MongoDB Redis Android Swift ionic Kotlin XML tutorial

Contact US