Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create bottom bordered (underline) navigation links with CSS?
To create underlined navigation links, use the border-bottom property in CSS. The border-bottom is a shorthand for the width, style, and color of the bottom border. These links will be displayed underlined on hover as well using the :hover selector. With that, the selected link will also get underlined. Let us see how to create bottom bordered i.e., underlined navigation links on a web page with HTML and CSS.
Create the navigation links
Use the <nav> element to create the navigation links on a web page −
<nav> <a class="links selected" href="#"> Home</a> <a class="links" href="#"> Login</a> <a class="links" href="#"> Register</a> <a class="links" href="#"> Contact Us</a> <a class="links" href="#">More Info</a> </nav>
Position the navigation
The navigation menu is positioned fixed using the position property −
nav{
position: fixed;
top:0;
width: 100%;
background-color: rgb(251, 255, 196);
overflow: auto;
height: auto;
}
Style the menu links
To style and display the menu links, set the display property to inline-block. Also, set the tex-decoration property to none to avoid the default underline of the links −
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(0, 0, 0);
text-decoration: none;
font-size: 17px;
font-weight: bolder;
}
Hovered links
The hovered link property is set using the :hover selector. It is underlined using the border-bottom property −
.links:hover {
border-bottom: 2px solid purple;
}
Selected links
The selected link was set the Home by default. It is underlined using the border-bottom property −
.selected{
border-bottom: 2px solid purple;
}
Example
The following is the code to produce bottom bordered (underline) navigation links with CSS −
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Document</title>
<style>
body{
margin:0px;
margin-top:60px;
padding: 0px;
}
nav{
position: fixed;
top:0;
width: 100%;
background-color: rgb(251, 255, 196);
overflow: auto;
height: auto;
}
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(0, 0, 0);
text-decoration: none;
font-size: 17px;
font-weight: bolder;
}
.links:hover {
border-bottom: 2px solid purple;
}
.selected{
border-bottom: 2px solid purple;
}
</style>
</head>
<body>
<nav>
<a class="links selected" href="#"> Home</a>
<a class="links" href="#"> Login</a>
<a class="links" href="#"> Register</a>
<a class="links" href="#"> Contact Us</a>
<a class="links" href="#">More Info</a>
</nav>
<h1>Hover on the above links</h1>
</body>
</html>
655 Views
