CSS Hover Underline Animation

byCodingFlicks -March 28, 2023

0

CSS animation is a technique of web design that enables you to create various kinds of animated objects with just CSS alone, without JavaScript or any other language. Today we will share with you another CSS animation example. This animation is a link hover underline animation. We hope you have seen this animation on various websites. You can see how the underline animation will look in the video demo below. Our website has many snippets about CSS animations, full website design, JavaScript projects, etc. To get them, click on the Load More button below the website homepage and keep scrolling down. Hope you get your desired snippet.

VIDEO DEMO:

Hope you have seen the video demo. If you want to add a touch of animation to your website's nav items or links, a hover underline animation can be a great way to do it. By adding this visually appealing effect to your links or nav item, you can make them more engaging and interactive for your visitors. We will show you how to create a hover underline animation step by step with HTML CSS.

The first step in creating Hover Underline animation is to create an HTML markup for our links. In CSS, we set some basic styles to remove the default bullet point and margin, and padding values. After that, we set the display property of our list items to inline-block so that we can keep them on one line. Then some more styling like link item color, background color font size, etc. is set. Next, we add a pseudo-element: before to our links using the content attribute. This element is located just below our links and is given 100% width and 2px height to create the underline effect. We set the visibility property to hidden and transform the property to scaleX(0). This hides the underline element by default. For the Hover state, The visibility property can be set to visible and the transform property can be set to scaleX(1). With this, The user can hover over the link to see the underline animation.

You May Also Like:

CSS Hover Underline Animation [ Source Code ]:

To create this hover underline animation, first, create an HTML file and a CSS file. After that, copy the code from the code box below and paste it into your files. If the code is not working, you can download the code from the download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com -->
<head>
    <title>How To Create An Hover Underline Animation In CSS</title>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
    </ul>      
</body>
</html>

ADD CSS:

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #111111;
  display: flex;
  justify-content:center;
  align-items:center;
  height: 100vh;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
  margin-right: 20px;
}

a {
	color: #a0a0a0;
	text-decoration: none;
	position: relative;
	transition: all 0.5s ease-in-out;
	font-family: 'Bebas Neue', cursive;
	color: #a0a0a0;
	font-size: 50px;
	letter-spacing: 0.5px;
	transition: all 0.6s ease;
	padding: 0 15px;
}

a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: deepskyblue;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.5s ease-in-out;
}

a:hover:before {
  visibility: visible;
  transform: scaleX(1);
}

Hope your code is working fine. If you have benefitted from our website, please share it with others. Thank you very much for visiting our website.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.