Creating a cool navigation bar with HTML, CSS

Power of the Internet in my hands!!

Today , I wanted to share the one of most coolest bars which you can create using HTML , CSS .

Credits @ Kevin Powell

The basic HTML Code we are using here :

<header>
    <div class="container">
      <h1 class="logo">logo</h1>
<nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

Playing with CSS

@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,600');
body {
 margin: 0;
 background: #222;
 font-family: 'Work Sans', sans-serif;
 font-weight: 800;
}
.container {
 width: 80%;
 margin: 0 auto;
}
header {
  background: #55d6aa;
  padding: 20px 0;
}
header::after {
  content: '';
  display: table;
  clear: both;
}
.logo {
/*   float: left; */
  text-align: center;
  padding: 10px 0;
  margin: 0;
}
nav {
  text-align: center;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
  margin-left: 70px;
  padding-top: 23px;
position: relative;
}
nav a {
  color: #444;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}
nav a:hover {
  color: #000;
}
nav a::before {
  content: '';
  display: block;
  height: 5px;
  background-color: #444;
position: absolute;
  top: 0;
  width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
  width: 100%;
}