Table of Contents
How to use ::before and ::after in Tailwind CSS
In this article we are going to learn that how you can use
::after selectors in Tailwind CSS. If you don't know what Tailwind CSS is then you learn it because it is just awesome. And trust me If you got used to it then you could not leave.
Now let's continue with this article. This feature is only available in Just-in-Time (JIT) mode. Tailwind has first-party support for styling pseudo-elements like
<div class="before:absolute before:bg-blue-500 after:flex after:bg-blue-300"></div>
content: "" by default so you don't need to worry about that. Any time you use a
after variant to make sure the elements are rendered, but you can override it using the content utilities which have full arbitrary value support:
<div class="before:content-['hello'] before:block ..."></div>
You can even grab the content from an attribute using the CSS
<div before="hello world" class="before:content-[attr(before)] before:block ..." ></div>
This can be super helpful when your content has spaces in it since spaces can't be used in CSS class names. You can use mostly any property with
Tailwind is the super awesome framework of CSS. According to me, it's the best so far. Everyone should learn it and it is very easy to learn and use. For more such articles consider a Follow.
I write monthly Tech, Web Development and chrome extension that will improve your productivity. Trust me, I won't spam you.