CSS place in circle first letter of the name
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 -->
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>