How to use ::before and ::after elements in Tailwind CSS ?

Last Updated : 26 Feb, 2024

In Tailwind CSS, we can use the ‘ :: before ‘ and ‘ :: after ‘ pseudo-elements by adding utility classes directly in your HTML. Simply apply the “before:” or “after:” prefix followed by the desired utility classes to style elements before or after their content.

Using Utility Classes

Tailwind CSS offers utility classes for seamless modification of pseudo-elements. You can apply these classes to control specific properties like content, color, and positioning.

Syntax:

<div class="before:bg-red-500 after:border-solid after:border-4">     
<!-- Code --></div>

Example 1: Implementation to use ::before and ::after elements using utility classes.

HTML

<!doctype html>
<html>
 
<head>
      <title>Using ::before and ::after</title>
    <meta charset="UTF-8">
    <meta name="viewport" content=
          "width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
</head>
 
<body class="p-5">
    <h1>Before</h1>
    <p class="text-lg bg-green-500
              text-white
              font-bold 
              leading-loose">
        Welcome to 
      <span class="before:content-['????'] text-blue-500">
          GeeksForGeeks
      </span>
    </p>
 
    <h1>After</h1>
    <p class="text-lg bg-green-500 
              text-white 
              font-bold
              leading-loose">
        Welcome to 
          <span class="after:content-['????'] text-blue-500">
              GeeksForGeeks
          </span>
    </p>
</body>
 
</html>

Output:

Screenshot-2024-02-14-111319

Example 2: Implementation to use ::before and ::after elements.

HTML

<!doctype html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
    </script>
</head>
 
<body>
    <div class="p-12">
        <div class="w-96 h-72 bg-green-700 p-20
                    hover:before:content-['Geeks'] 
                    before:text-4xl before:text-black-300
                    hover:after:content-['Geeks'] 
                    after:text-5xl after:text-red-300">
            <h1 class="text-4xl text-white">
                  GeeksforGeeks
              </h1>
        </div>
    </div>
</body>
 
</html>