CSS place in circle first letter of the name

Question

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:

Is it possible to make this with CSS?

I have tried it with :first-letter pseudo-class but it didn't work for me.

Any suggestions?

Answer 1

Since you stored those names, then when you extract them you can as well extract first-letter of each words/names and store them in a data- attribute.

It is more a server-side (or javascript) job than CSS.

exemple with pseudo:

[data-letters]:before {
  content:attr(data-letters);
  display:inline-block;
  font-size:1em;
  width:2.5em;
  height:2.5em;
  line-height:2.5em;
  text-align:center;
  border-radius:50%;
  background:plum;
  vertical-align:middle;
  margin-right:1em;
  color:white;
  }

<p data-letters="MN"> My Name</p><!-- or whatever structure you used -->

Answer 2

Here is another way of doing this, I have modified a link given in a comment above, although some of the answers suggested above are quite shorter. This approach is very basic and simple to understand for beginners:

$('h1').each(function() {
  var str = $(this).text();
  var matches = str.match(/\b(\w)/g);
  
  var acronym = matches.join('');
  
  $(this).prepend('<span><i>' + acronym + '</i></span>');
  
})

* {
  box-sizing: border-box;
}

h1 {
  font-size: 24px;
  margin: 15px 0;
}

h1 span {
  background: rgba(155, 79, 243, 0.74);
  text-transform: uppercase;
  font-family: "Lucida Console";
  align-items:center;
  color: rgba(233, 236, 237, 0.78);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: inline-flex;
  font-size: 16px;
  padding: 5px;
  vertical-align: middle;
  margin: 0 10px 0 0;
}
h1 span i{
  width:max-content;
  font-style: normal;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<h1>Morbi metus</h1>
<h1>yorbi fasetus</h1>
<h1>test tessdfa</h1>