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.
<!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:
Example 2: Implementation to use ::before and ::after elements.
<!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>
Output:
