Use Tailwind to add emoji or shapes using hexCode in psuedo elements

I needed to add a filled triangle as an after content value to show sorting in a table.

Found the triangle code from https://www.w3schools.com/charsets/ref_utf_geometric.asp . Now in the code (which is configured to use tailwind ), use the following —

<div className="header-client after:content-['\025B3'] ">
    Names
</div>

So take the code prefix it with “\0” to use in css.

Now this triangle appeared too close to the ‘Names’ . To add space you can add underscores .The underscores are replaced with space .

<div className="header-client after:content-['__\025B3'] ">
    Names
</div>

Option 2 : Using emjoi’s codepoint

Example with using emoji codepoint. Select your emoji from https://emojipedia.org/. Use codepoint replacing U+ with \0.

<div className="after:content-['\01F354'] ">
       Names
      </div>

You will see this

Option 3: Copy the emoji or symbol directly to the file.

Hope this helps.