I'm trying to add a pipe to my menu links, using tailwind ::before pseudo element but it doesn't work.

<a className='text-xl font-normal before:content-["|"] before:pl-8 bg-white font-open-sans'>home</a>

The above result in the following

How can I add the pipe properly with padding/margin between text and pipe?

CodePudding user response：

You just need to add the padding to the other side of the pipe, changing before:pl-8 to before:pr-8.

Working version here: https://play.tailwindcss.com/G5IqVTI5Rg