How do I create a CSS-only animated underline effect?

Creating a CSS-Only Animated Underline Effect

Underline animations can add an interactive touch to your website, enhancing user experience and drawing attention to certain elements. In this blog post, we will discuss how to create a CSS-only animated underline effect, without the need for JavaScript.

Step 1: Basic HTML Structure

First, let’s create the basic HTML structure for the element we want to animate. For this example, we’ll use a simple navigation menu with three links:

<!-- html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Only Animated Underline Effect</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

Step 2: Basic CSS Styling

Now, let’s add some basic CSS styling to our navigation menu. We’ll set the font, colors, and layout:

/* CSS */
body {
font-family: Arial, sans-serif;
}

nav {
text-align: center;
}

ul {
list-style-type: none;
padding: 0;
}

li {
display: inline-block;
margin: 0 10px;
}

a {
text-decoration: none;
color: #333;
position: relative;
}

Step 3: Create the Underline Animation

Now, let’s create the underline animation using CSS. We will use the “before” pseudo-element to create the underline and animate it on hover:

/* CSS */
a::before {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background-color: #333;
transition: width 0.3s;
}

a:hover::before {
width: 100%;
}

Explanation:

The “before” pseudo-element creates an empty element with no content.
We set its position to “absolute” and its parent element (the “a” tag) to “relative” so that the position of the underline is relative to the link.
The initial width of the underline is set to 0, and we set the height to 2px.
The “bottom” and “left” properties are set to 0, which positions the underline at the bottom of the link.
We set the background-color to match the link text color.
The “transition” property is set to “width 0.3s”, which means the width will animate over 0.3 seconds.
On hover, we set the width of the underline to 100%, creating the animated underline effect.

That’s it! Now you have a CSS-only animated underline effect for your links. You can easily apply this effect to other elements by adjusting the CSS selectors as needed.