Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to create bottom bordered (underline) navigation links with CSS?

CSS Web Development Front End Technology

To create underlined navigation links, use the border-bottom property in CSS. This property is a shorthand for setting the width, style, and color of the bottom border. These links will display an underline on hover using the :hover selector, and the selected link will also remain underlined.

Syntax

selector {
    border-bottom: width style color;
}

/* For hover effect */
selector:hover {
    border-bottom: width style color;
}

Example: Bottom Bordered Navigation Links

The following example creates a navigation menu with underlined links on hover and a selected state −

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        margin: 0;
        font-family: Arial, sans-serif;
    }
    
    nav {
        background-color: #f8f9fa;
        padding: 0;
        border-bottom: 1px solid #ddd;
    }
    
    .nav-link {
        display: inline-block;
        padding: 15px 20px;
        color: #333;
        text-decoration: none;
        font-weight: 500;
        transition: border-bottom 0.3s ease;
        border-bottom: 3px solid transparent;
    }
    
    .nav-link:hover {
        border-bottom: 3px solid #007bff;
        color: #007bff;
    }
    
    .nav-link.active {
        border-bottom: 3px solid #28a745;
        color: #28a745;
    }
</style>
</head>
<body>
    <nav>
        <a href="#" class="nav-link active">Home</a>
        <a href="#" class="nav-link">About</a>
        <a href="#" class="nav-link">Services</a>
        <a href="#" class="nav-link">Contact</a>
    </nav>
    
    <div style="padding: 20px;">
        <h1>Hover over the navigation links</h1>
        <p>The active link (Home) has a green underline, while hovering shows a blue underline.</p>
    </div>
</body>
</html>

A horizontal navigation bar appears with four links. The "Home" link has a green underline (active state). When you hover over other links, they get a blue underline with a smooth transition effect.

Key Properties Explained

Property Purpose
border-bottom Creates the underline effect
:hover Applies styles when mouse hovers over the link
transition Adds smooth animation to the border appearance
transparent Hides the border initially while maintaining spacing

Conclusion

The border-bottom property provides an elegant way to create underlined navigation links. Using :hover and active states with smooth transitions creates a professional-looking navigation menu that enhances user experience.

Updated on: 2026-03-15T14:17:19+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements