Open In App

Underline Hover Animation Effect using Tailwind CSS

Improve
Improve
Like Article
Like
Save
Share
Report

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:

 



Last Updated : 16 Mar, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads