How To Create A Border Bottom Using HTML & CSS

How To Create A Border Bottom Using HTML & CSS
285 Views

On navbar ( short form of navigation bar. You can call it Navigation bar ), we usually keep our menu link. Many people love to design this navbar according to their own style. Some people love to keep it as simple.

But nowadays, maximum people style their navigation bar and menu link also. What is the reason? Ha, There is nothing so special but to attract users.

Hae huys, welcome back to anupdebnath.info. Our today’s discussion is-

How To Create A Border Bottom Using HTML & CSS

okay guys let’s get started.

Apply HTML Code

To create bottom bar, we have to create a html and a css file first. After saving these files we can start our work. I hope, you already done that.

First Step :: write down the default HTML structure first. Check this code below if you do not have idea.

<!DOCTYPE html>
<html>
<head>
  <title>Create A Bottom Bar </title>
  <link rel="stylesheet" type="text/css" href="bottom.css">
</head>
<body>

</body>
</html>

Between body part we need to write the html code for navigation bar.

Second step :: create a navigation bar now. write your code for menu link. below is an example for you –

<div class="uppernav">
  <a href="#" class="active">Home</a>
  <a href="#">Blog</a>
  <a href="#">Portfolio</a>
  <a href="#">About Us</a>
  <a href="#">Contact</a>
</div>

Apply CSS Code

Okay we have created the structure for navigation bar. Time to apply the CSS code.

We need to apply code 4 times to create a border bottom on navbar.

First Step :: focus on .uppernav class. Let’s style it with css code.

.uppernav{
	overflow: hidden;
	background-color: #f0f0f0;
}

Second step :: now we need to style the “a” which is under the class uppernav. Wait for a while. Do not be so hurry. if you do not style it, you will see everything together like this picture –

Now write the css code for .uppernav>a.

.uppernav>a{
	float: left;
	top: 0px;
	padding: 14px 16px;
	font-size: 18px;
	text-decoration: none;
	border: 3px solid transparent;
	display: block;
	color: #000;
}

Third Step :: Did you notice i create an active class in first anchor tag?? Time to apply css code for this. wrote the code now –

.uppernav>a.active{
	border-bottom: 3px solid green;
}

Fourth Step :: Want to create hover effect? To create this all we need to do is to write some hover codes for this. Write the css code now –

.uppernav>a:hover{
	border-bottom: 3px solid green;
	transition: 0.4s;
}

Yeah…. We are finished. <3 <3

Watch This Video To Learn How To Create A Border Bottom On Navigation Bar

How is this? Coding is fun, isn’t it? :p :p If you like this comment below. If you think it is not so cool as your thought then describe your opinion regarding it on comment box.

Happy watching. <3 .

Related posts for you

2 Thoughts to “How To Create A Border Bottom Using HTML & CSS”

  1. Awesome….Thanks for this blog

Share Your Opinion With Me