Notifications Page Main - SASS

Community feedback

• 

  Catalin Banici•260

  @CatalinBanici

  Posted over 2 years ago

  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

  01

  Marked as helpful