title: CSS place in circle first letter of the name
body: <p>I'm making a website where I have some contacts and near every contact name I'm trying to get their initials and place it in a circle next to it like in the image below:</p>
  <p><img src="https://i.stack.imgur.com/RCAtK.png" alt="A contact name with their initials in a circle next to their name" /></p>
  <p>Is it possible to make this with CSS?</p>
  <p>I have tried it with <code>:first-letter</code> pseudo-class but it didn't work for me.</p>
  <p>Any suggestions?</p>