Untitled

<html>
<head>
<title>Trello's-like Name Initials</title>
    <style>
        [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: #eeeeee;
            vertical-align:middle;
            margin-right:0.2em;
            color: #515151;
        }
    </style>
</head>
<body>
    <span data-letters="" id="navUserInitials">
        <span id="navUserName">Marcelo Barros</span>
    </span>

    <script>
        let name = document.getElementById('navUserName').innerHTML;
        let initialSpot = document.getElementById('navUserInitials');
        let initials = name.match(/\b\w/g) || [];
        initials = ((initials.shift() || '') + (initials.pop() || '')).toUpperCase();
        initialSpot.setAttribute('data-letters', initials)
    </script>
</body>
</html>