Blog > Versoly

Formatting CMS items with pseudo classes

By Jonny Holden

Published April 14, 2024

On this blog sometimes it's just me writing, and sometimes I use AI. Often I'll take the AI and add my own edits.

To be transparent I decided to create an author, "Art Intellig". So then I need to format the author CMS list like this

By Art Intellig and Jonny Holden

tl:dr here's the code

<div class="flex flex-row">
     <p>By <template v-for="author in item.authorsItems"> <span v-text="" class="last:after:content-[''] before:content-['\00a0'] after:content-['\00a0''and']">Author</span></p>
</template> </div>

Note: In Tailwind, content-['_'] should create a blank space, but in Versoly it doesn't work. So we have to use the CSS non-breaking space \00a0, like \  in HTML.

For semantic HTML, we want everything in a single paragraph, <p>. The is then wrapped in a <span>.

I need a space after By and after each name. I've used a pseudo class before:content-['\00a0'] to add a space before each name, which gives the effect I'm looking for. (Sometimes, you do the opposite of what you initially think!)

Next I want the word and between each author, but not after the last author. I've used the pseudo class after:content-['\00a0''and']. Note that each item in the class is in it's own '_' single quote marks.

To remove the and from after the last name we've got last:after:content-[''] which will override any other after:.