Underline Hover Animation Effect using Tailwind CSS
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" >
< link href =
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" >
< link href =
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" >
< link href =
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:
Last Updated :
16 Mar, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...