title: transition background of pseudo element
body: <p>I have a pseudo element which has a border radius of 50% and a background color when I hover on it, so a circle will be displayed when I do the hover.</p>
  <p>I want to add a transition so the circle looks like it grows when I hover (like when you hover the star icon on gmail), but I can't figure out how to do it.</p>
  <p>This is what I tried :</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>.container {
    position        : relative;
    height          : 100px;
    width           : 300px;
    padding         : 24px;
    background      : #fff;
    display         : flex;
    flex-direction  : column;
    justify-content : space-between;
    box-sizing      : border-box;
    color           : black;
    list-style      : none;
    border          : 2px solid black;
    }
  input[type="checkbox"] {
    height     : 40px;
    width      : 40px;
    position   : absolute;
    top        : 12px;
    right      : 12px;
    margin     : auto;
    appearance : none;
    outline    : none;
    cursor     : pointer;
    opacity    : 1;
    border     : none;
    }
  input[type="checkbox"]::after {
    content                    : url("https://svgshare.com/i/Qo7.svg");
    position                   : absolute;
    top                        : 0;
    left                       : 0;
    border-radius              : 50%;
    margin                     : auto;
    width                      : 100%;
    height                     : 100%;
    pointer-events             : none;
    display                    : flex;
    justify-content            : center;
    align-items                : center;
    z-index                    : 2;
    transition-duration        : 1s;
    transition-timing-function : cubic-bezier(0.4, 0, 0.2, 1);
    transition-property        : background;
    background-size            : 40%;
    background-position        : center;
    }
  input[type="checkbox"]:checked:after {
    content             : url("https://svgshare.com/i/Qmp.svg");
    } 
  input[type="checkbox"]:hover:after {
    background      : linear-gradient(to bottom, #D9DEEA 0%, #D9DEEA 100%) no-repeat;
    background-size : 100%;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;input type="checkbox" /&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>And I have another issue is that the star is not properly centered inside the cicrle.</p>
  <p>How can I fix this ?</p>