Underline Hover Animation Effect using Tailwind CSS
Last Updated :
16 Mar, 2023
The Tailwind CSS underline animation is a visual effect that can be added to any text or heading or a specific word in the web page using the Tailwind CSS utility framework. The basic function of this effect is this creates an underline animation from left to right with a smooth transition, in simpler words it created underline animation whenever we hover overall it is a simple and effective way to add visual interest and interactivity to links or text on a website.
Installing Tailwind CSS on your local system: Before we dive into the Tailwind underline hover animation, you have to make sure that Tailwind CSS is available on your local computer if not there are a couple of steps that you need to follow check it at Introduction to Tailwind CSS.
Underline hover class:
- hover: underline
- hover: no-underline
Creating the Underline Hover Animation: To create a hover animation that adds an underline to the text link, we have to add the Tailwind CSS classes. Here is a simple hover underline animation using Tailwind CSS.
hover: underline: It is the main class that is used to create a hover underline effect. It applies the underline effect when we hover over it.
Syntax:
<element class="hover:underline">...</element>
Example:
HTML
<!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">
<!-- Tailwind CSS CDN link -->
<link href=
"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet">
<title>
Underline Hover Animation
Effect using Tailwind CSS
</title>
</head>
<body class="m-4">
<h1 class="text-green-500
text-4xl font-bold">
Welcome to Geeksforgeeks
</h1>
<p class="font-bold">
Tailwind CSS Tutorial
</p>
<p>
you can use Tailwind easily for
faster and better designs rather
than normal CSS
</p>
<p class="text-xl font-bold
hover:underline">
hover here
</p>
</body>
</html>
Output:
when you hover over a specified area you get underline
hover: no-underline: This class is applied for removing the underline, generally when we hover over any link there will be an animated underline so by this class the underline will be removed whenever we hover over it.
Syntax:
<element class="hover:no-uderline">...</element>
Example:
HTML
<!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">
<!-- Tailwind CSS CDN link -->
<link href=
"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet">
<title>
Underline Hover Animation
Effect using Tailwind CSS
</title>
</head>
<body class="m-48 flex flex-col
justify-center
items-start">
<h1 class="text-green-500
text-4xl
font-bold">
Welcome to Geeksforgeeks
</h1>
<p class="font-bold">
Tailwind CSS Tutorial
</p>
<p>Example 2</p>
<p class="text-xl
font-bold
hover:no-underline
cursor-pointer">
Hover here
</p>
</body>
</html>
output:
here when you hover over the specified area there will be no underline
Example: You can also use different classes for even better understanding.
The classes that are used additionally are:
- hover: duration: this class enables the duration of the hover effect.
- cursor: pointer: this class makes any cursor a pointer so we use it as an effect when we hover over it.
- hover:text-green-500: This class changes the color of the text when you hover on particular text or link.
Syntax:
<element class="hover:underline
hover:text-green-500
hover:duration-300
cursor-pointer">
...
</element>
HTML
<!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">
<!-- Tailwind CSS CDN link -->
<link href=
"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet">
<title>
Underline Hover Animation
Effect using Tailwind CSS
</title>
</head>
<body class="m-48 flex
flex-col
justify-center
items-start">
<h1 class="text-green-500
text-4xl
font-bold">
Welcome to Geeksforgeeks
</h1>
<p class="font-bold">
Tailwind CSS Tutorial
</p>
<p>Example 2</p>
<p class="text-xl
font-bold
hover:underline
hover:text-green-500
inline-block
hover:duration-300
cursor-pointer">
Hover here
</p>
</body>
</html>
Output:
Similar Reads
Snowfall Animation Effect using CSS In this article, we will see how to create a snowfall animation using HTML and CSS purely, without Javascript & related libraries. In this animation, the user will see the screen covered with a background image, & small snowballs are falling down the screen. As they are falling, they fade aw
5 min read
Fading Text Animation Effect Using CSS3 The fading text animation effect is one of the most demanding effects on UI/UX designing. This effect can be achieved by using HTML5 and CSS3. In the fading text effect, whenever we load the window, the text will slowly start disappearing. We can implement this effect using the animation property in
2 min read
How to use CSS Animations with Tailwind CSS ? Tailwind CSS classes are used to style elements and apply animations effortlessly. Utilize Tailwind's animation utility classes to add dynamic visual effects. Combine Tailwind CSS with custom CSS animations for versatile and engaging web designs. Table of Content Tailwind CSS Animation Utility Class
3 min read
How to make Animated Click Effect using Tailwind CSS & JavaScript ? It refers to the technique of implementing animations that respond to user clicks, utilizing the Tailwind CSS for styling and layout, and JavaScript for adding dynamic behavior to the elements. This enhances user engagement and improves the overall user experience of the websites. Table of Content U
2 min read
How to make a CTA Animation with Tailwind CSS ? To enhance the engagement level of your website's Call-to-Action (CTA) elements we use Tailwind CSS utility classes. By directly customizing transition effects with Tailwind CSS, you can effortlessly introduce captivating animation effects to your CTAs, improving user interaction and overall user ex
2 min read
How to Modify Hover Effect using Tailwind CSS ? In Tailwind CSS, the term "modify hover" refers to changing the styles that are applied to an element when it is hovered over. With Tailwind CSS "hover" variation, you can quickly apply particular utility classes and custom classes to control how components appear when you hover over them, giving yo
3 min read
How to create button hover animation effect using CSS ? Minimal rotating backdrop button hovers and click animation is a basic CSS animation effect where when the button hovers, the button's background color changes, and when the button is clicked, it scales down slightly. This animation is implemented using CSS pseudo-elements and transitions. The ::sel
3 min read
Tailwind CSS Hover Effects A hover effect is a visual change that occurs when a user moves their mouse pointer over an element on a webpage. We can achieve a hover effect by Tailwind CSS built-in prefix modifier called "hover: ".These are the following ways to use hover:Table of ContentSimple Hover Effect (Background color ch
3 min read
How to use Animation and Transition Effects in CSS ? With the help of CSS, you may design impressive visual effects for your website. Animation and transition effects are two common ways to add animation and visual effects to a web page. By attracting users' attention and directing them through your material, these effects may make your website more d
4 min read
How to create icon hover effect using CSS ? To style an icon's color, size, and shadow using CSS, use the color property to set the icon's color, font size to adjust its size, and text-shadow or box-shadow for adding shadow effects, creating a visually appealing and dynamic look.Using: hover Pseudo-ClassUsing the: hover pseudo-class, you can
2 min read