Creating Animated Underline Effect for Navbar Links with CSS

Creating an underline animation for navbar links in CSS using transitions involves using the transition property to smoothly animate the width or other properties of a pseudo-element, such as ::after or ::before, that represents the underline effect. Here's an overview of the steps involved:

Here's a step-by-step overview of how you can create an underline animation for navbar links using CSS:

HTML Structure : Start by setting up the HTML structure for your navbar. Typically, a navbar consists of an unordered list (<b><ul> </b>) containing list items (<b><li> </b>) that represent the individual links. For example:

<div class="container">
<ul>
  <li><a href="#">HOME</a></li>
  <li><a href="#">PAGE</a></li>
  <li><a href="#">ABOUT US</a></li>
  <li><a href="#">CONTACT US</a></li>
</ul>
</div>

CSS Styling : Apply CSS styles to structure and style the navbar. You can use CSS to set the layout, colors, fonts, and other visual properties of the navbar, including the initial state of the underline effect. For example:

 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
*{
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a{
  text-decoration: none;
  color:#333;
  font-weight: 500;
}
body{
  height: 100vh;
  width: 100vw;
  background-color: #dfe4ea;
  display: flex;
  justify-content: center;
  align-items: center;
}
ul li{
  list-style-type: none;
  display: inline-block;
  margin-right: 10px;
  padding-bottom:3px ;
}

CSS Transition : Use the transition property to specify the properties that should be animated and the duration, timing function, and delay of the animation. In this case, you can use transition to animate the width property of the pseudo-element representing the underline effect. For example:

li:after{
  content: '';
  margin: auto;
  display: block;
  height: 2px;
  width: 0%;
  background-color: transparent;
  /* transition: width 0.5s ease,background-color 0.5s ease; */
  transition: all 0.5s ease;
}

Hover Effect : Finally, use CSS pseudo-classes to apply the underline animation effect on hover. You can use :hover pseudo-class to target the navbar links when they are hovered over and specify the new width value for the animation effect. For example:

li:hover:after{
  width: 100%;
  background-color: red;
}

With the above steps, you can create an animated underline effect for navbar links using CSS transitions. When users hover over the links, the width of the pseudo-element representing the underline will smoothly transition from 0 to the specified width, creating a smooth and visually appealing animation effect for your navbar links.

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
    *{
      font-family: 'Poppins', sans-serif;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    a{
      text-decoration: none;
      color:#333;
      font-weight: 500;
    }
    body{
      height: 100vh;
      width: 100vw;
      background-color: #dfe4ea;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    ul li{
      list-style-type: none;
      display: inline-block;
      margin-right: 10px;
      padding-bottom:3px ;
    }

    li:after{
      content: '';
      margin: auto;
      display: block;
      height: 2px;
      width: 0%;
      background-color: transparent;
      /* transition: width 0.5s ease,background-color 0.5s ease; */
      transition: all 0.5s ease;
    }
    li:hover:after{
      width: 100%;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="container">
    <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">PAGE</a></li>
      <li><a href="#">ABOUT US</a></li>
      <li><a href="#">CONTACT US</a></li>
    </ul>
  </div>
</body>
</html>

Creating Animated Underline Effect for Navbar Links with CSS

Source Code

CSS Tutorial

Properties Reference

Cascading Style Sheet

Flexbox Tutorial

CSS Grid Tutorial

Transitions Properties

CSS Properties with Examples

CSS Selectors

CSS Pseudo Elements

CSS Attribute Selectors

Input Pseudo Classes

CSS Examples

CSS Animation Projects