How to use ::before and ::after elements in Tailwind CSS ?
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" > w3wiki </ 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" > w3wiki </ span > </ p > </ body > </ html > |
Output:
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-['Beginner'] before:text-4xl before:text-black-300 hover:after:content-['Beginner'] after:text-5xl after:text-red-300"> < h1 class = "text-4xl text-white" > w3wiki </ h1 > </ div > </ div > </ body > </ html > |
Output: