title: Doble the scaling when using active selector in an react icon CSS
body: <p>I'm using the active selector to scale down an icon when clicked in this way:</p>
  <pre><code>.icon :active {
    transform: scale(0.8);
  }
  </code></pre>
  <p>this is the jsx</p>
  <pre><code>&lt;span className=&quot;icon&quot;&gt;
            &lt;AiFillEdit /&gt;
    &lt;/span&gt;
  </code></pre>
  <p>The problem is that it is scaled in a weird way, if I click outside the icon, but inside the span box  it scales normally, but if I click in the React icon the scaling is applied 2 times heres  a pic so you can see the problem.</p>
  <p><a href="https://i.stack.imgur.com/9Fm4B.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9Fm4B.png" alt="pic" /></a></p>