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.

Output:

👁 Screenshot-2024-02-14-111319

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

Output:

👁 cfd