title: how can i use active pseudo class to show something
body: <p>im trying to show a text &quot;copied&quot; after an image has been clicked, with :active class but testing with hover and i cant figure it out. Like a :hover on a navbar to see a drop down menu</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>.copy {
    display: flex;
  
    &amp;__text {
      display: none;
    }
  
    &amp;__img {
      max-width: 1.2rem;
      height: 1.2rem;
      margin-left: 0.3rem;
      cursor: pointer;
  
      &amp;:active {
        filter: opacity(0.5) drop-shadow(0 0 0 rgb(133, 177, 0));
      }
    }
  }
  .copy__img:active .copy__text {
    display: block;
    background-color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div className="copy"&gt;
        &lt;img
          className="copy__img"
          src={CopyIcon}
          onClick={copyText}
          alt="copy icon"
        /&gt;
        &lt;p className={"copy__text"}&gt;copied&lt;/p&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>