title: CSS circle with inner circle and image
body: <p>I'm trying to achieve the following:</p>
  
  <ul>
  <li>A background circle with a smaller colored circle inside of it, which must be centered</li>
  <li>A small centered image inside of both circles</li>
  <li>All of these items needs to be placed in a single div</li>
  </ul>
  
  <p>I'm trying to do this with the minimum amount of code. I want to avoid duplication as much as possible. I believe that all of this can be achieved using before and after selectors, but I'm not sure how to get this done</p>
  
  <p>Here's what I have so far:</p>
  
  <p>CSS:</p>
  
  <pre><code>    .grid-container {
          display: grid;
          grid: 100px / 100px;
      }
  
      .circle {
          border-radius: 50%;
          width: 100%;
          height: 100%;
          background-color: #e4e4e7;
      }
  
       .circle:before {
          content: "";
          border-radius: 50%;
          width: 80%;
          height: 80%;
          top: 10%;
          left: 10%;
          background-color: blue;
          display: block;
          position: relative; 
      }
  
      .image-one:before {
          content: url("https://stackoverflow.com/favicon.ico");
      }
  
      .circle-01 {
          grid-column: 1 / 2;
          grid-row: 1 / 2;
      }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="grid-container"&gt;
      &lt;div class="circle-01 circle image-one"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I need a structure whereby I can easily change the color of the inner circle and/or image</p>
  
  <p>Example</p>
  
  <pre><code>&lt;div class="grid-container"&gt;
      &lt;div class="circle-01 circle image-one yellow"&gt;&lt;/div&gt;
      &lt;div class="circle-01 circle image-two blue"&gt;&lt;/div&gt;
      &lt;div class="circle-01 circle image-three green"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>