CSS

create notification badge in css

html file:

<div class="my-element" notif="77" ></div>



css file:

.my-element {
    position: relative;
    width: 50px;
    height: 50px;
    border: 1px solid black;
    border-radius: 4px;
}

.my-element::before {
    content: attr(notif);
    position: absolute;
    top: -0.75em;
    right: -0.75em;
    width: 1.5em;
    height: 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: red;
    color: white;
}