Empty content in ::after

[fvanwijk]

It is quote common practice to add a ::after pseudo element with content: '' and position: absolute and additional styling.
For example when you want a customized text underline on a link.

I know there is after: and absolute but is there also something like after:content-empty or can it be added to twin?
I haven't seen this in Tailwind, so this might not be the perfect place to discuss this.

Workarounds are:

<a tw="after:(absolute,other-styles)" css={{ content: "''" }}>Link</a>

Or create a tailwind util.

[ben-rogerson]

This is all sorted, just use the content class to add content: '' for before: and after:.

<a tw="after:(content absolute)">Link</a>

[fvanwijk]

Thanks! Glad there is already such a util that I can use.

Searching on the Tailwind website doesn't give me any results on 'content', so this seems to be a twin only feature right?

I found the usage of content in the big twin.macro code sample and on the variant page. Am I missing some page where content is documented in more detail?

And a more general question: do you have any plans to upgade the MD files on Github to a nice static site similar to tailwind.com that is searchable?

[ben-rogerson]

Yeah exactly, it's a twin only class I added at the same time I added the variants before: and after:
I think the feature may be only shown in that variants example you found.

Definitely time for a docs upgrade, a website is underway where I can beef up the docs around features like this 👍