title: How can I create an avatar with number in the circle in css
body: <p>I want to create a numbers inside circle as an avatar in the circle. MY result using the below css and my html did not end up with good output. can you help with this please?
   So my css is like below. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.avatar-number {
    display: grid;
    padding-left: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ccFF;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="avatar-number"&gt;1&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>