Menu border hover animation using HTML & CSS

This article will focus on genuine CSS tricks that would be simple to drop into any project without having to touch the DOM or use JavaScript. I proposed this challenge in the Animation at Work Slack and again Though there was no consensus on the best approach, I did receive some really clever ideas from some phenomenal developers.

HTML Code:

<ul class="">
  <li><a href="">Home</a></li>
  <li><a href="">About</a></li>
  <li><a href="">Portfolio</a></li>
  <li><a href="">Our Team</a></li>
  <li><a href="">Contact</a></li>
</ul>

CSS Code:

*{
  margin: 0;
  padding: 0;
}
body{
  background-color: #295;
  font-family: sans-serif;
}
ul{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
ul li{
  list-style-type: none;
  display: inline-block;
  border-right: 1px solid rgba(0,0,0,0.1);
}
ul li:last-child{
border: none;
}
ul li a{
  display: block;
  text-decoration: none;
  padding: 12px;
  font-size: 16px;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  letter-spacing: 2px;
  font-weight: 200;
  color: #ddd;
  transition: .6s;
}
ul li a:hover{
  color: #114d4d;
}
ul li a:before{
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  width: 0;
  height: 2px;
  background-color: #114d4d;
  transition: .6s;
}
ul li a:hover:before{
  content: '';
  width: 100%;
  left: 0;
}
RH Suman
RH Suman
Articles: 64

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply