From the course: Tailwind CSS 4 Essential Training

Unlock this course with a free trial

Join today to access over 24,800 courses taught by industry experts.

Styling pseudo-elements

Styling pseudo-elements - Tailwind CSS Tutorial

From the course: Tailwind CSS 4 Essential Training

Start my 1-month free trial Buy for my team

Styling pseudo-elements

“

- [Instructor] Very similar to pseudo classes, we can also style pseudo elements in Tailwind. Look at this list we saw in the previous video styled a little differently. The list has some styled numbers and this heading has a fancy decoration. To make something like this, we need pseudo classes. Let's start from here. To style these markers, we can use the marker variant on the parent. We can say marker and then add the styles that we wish. So let's say we change the color to text-amber-600. You see, the color changes. You can change the marker font size as well. So say text-sm and then say marker font-semibold. Refresh. Yeah, or we can say marker bold as well. All right, so this is a pseudo element that can be styled using Tailwind with the same name as the variant. You see? Yeah, that's the pseudo element. Okay, for this heading style here, we actually need two elements, one on the left and one on the right, with each element of height, say two pixels, background color, and width…

Contents