<hr>:after places element before

I’m trying to place a small dot at the end of my <hr> tag using ::after. But instead the element gets added as if it where added ::before. To style the <hr> I’m using Tailwind, but doing the ::after styling with CSS. Here’s an image of what it looks like now, the dot is to the left. I would like it to just place the small dot at the other end of the line, to the right.

This is my code:

CSS

.right::after {
    content: ' ';
    width: 5px;
    height: 6px;
    position: absolute;
    margin-top: -6px;
    margin-left: -1px;
    border-radius: 5px;
    border: 5px solid #9596ff;
    background-color: #9596ff;
}

HTML

    <hr class="right mt-7 mb-5 border-t-1 w-full">

Thanks in advance!

>Solution :

You need to specify position: relative of hr, otherwise the dot would be positioned according to the rest of the page.

.right {
    display: block;
    position: relative; 
}
.right::after {
    content: ' ';
    width: 5px;
    height: 6px;
    position: absolute;
    margin-top: -6px;
    margin-left: -1px;
    border-radius: 5px;
    border: 5px solid #9596ff;
    background-color: #9596ff;
    top: -1px;
    right: -1px;
}

<hr class="right mt-7 mb-5 border-t-1 w-full">