Notifications Page Main - SASS

For the little orange dot, I basically added a <span> element in the <p> tag containing the other tags, and after the other tags inside that <span> I put a <i> tag with the font awesome icon fa-solid fa-circle, and dynamically that <span> element getting removed as onclick event. I did not use :after pseudo.

scroll to the right

 <li class="notification new-notification">
        <div>
          <a href="#"><img class="avatar" src="./assets/images/avatar-mark-webber.webp" alt="User Avatar"></a>
        </div>
        <div class="text-div">
          <p><a class="name" href="#">Mark Webber</a> reacted to your recent post <span class="link"><a href="#">My first tournament today!</a></span><span class="new-icon"><i class="fa-solid fa-circle"></i></span></p>
          <p>1m ago</p>
        </div>
      </li>

You can try replacing the :after with <i class='fa solid fa solid></i> and make it orange, I hope it helps