Responsive Notifications page / BEM, SCSS, JS / Counter, Clear Msgs

Hello, it was interesting to implement functionality with Pure JS!

I have a question on the CSS topic:

I've implemented this red circle responsible for unread msgs via ::after pseudo element after paragraph . The problem is that when text inside paragraph wraps it takes more width than it's content, hence the red circle offsets to the right side more than it's required and looks pretty ugly. Don't you know how to fix that?

Also, the question on JS:

What you think i can improve in DOM manipulation? Especially, it relates to the code for the markAllRead function

Thanks in advance!