bwfcwalshy bwfcwalshy - 1 month ago 12
CSS Question

Move a circle to the top right of a font awesome bell

I have got a font-awesome bell and I am trying to make a bell appear on the top right of the bell.
Here is an example of what I want made in paint.NET
https://gyazo.com/2d74f611e2df81362bc3f2e946f9d747

And here is what I have tried so far:



.notification {
background: red;
border-radius: 50%;
border: 1px solid red;
height: 8px;
width: 8px;
position: relative;
}

<i class='fa fa-bell notification'></i>





But this puts the bell on the left side. I tried :before but it just made it disappear.

Thank you in advance.

Answer

Put position: relative; to the <i>-tag and then in your CSS add:

.notification:after {
    content: "";
    display: block;
    position: absolute;
    width: 8px;
    height: 8px;
    background: red;
    top: 0;
    right: 0;
    border-radius: 50%;
}
Comments