How To Separate A Text Or Element With A Dot In TailwindCSS

TailwindCSS is something you can never stop using once you have tasted it, but if you're new to TailwindCSS, I recommend checking the docs before googling. So let's start.

I'm using Next.js since it can be used in any valid HTML file.

Adding a dot between a text or element or icons can be done quickly with TailwindCSS by using the pseudo-class "after". But let's first do it in HTML and CSS, then in TailwindCSS

HTML

<div class='flex'>
  <span id='sub_heading'>5 Minutes Read</span>
  <span>12:32</span>
</div>

CSS

#sub_heading::after{
  content: '•̀';
  padding-left: 5px;
}

I added "padding-left" to give a little space.

OUTPUT

And that's how it is done in CSS, but in TailwindCSS is it a lot easier and faster at the same time. And here it is:

<div>
  <span className='after:content-["•"] pl-5 ...'>5 Minutes Read</span>
  <span>12:32</span>
</div>

See! Done! TailwindCSS makes it so much easy to accomplish this with ease.