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!

CodePudding user response：

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">

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Since you are using position: absolute; you will need to add right: 0; to move it over. CSS would look like this.

.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;
    right: 0;
}

CodePudding user response：

You have position absolute but provide no placement instructions.

I added

      right: 0;
      top: 0;

to .right::after:

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

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

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

And to make the dot look more like your image:

.right::after {
  content: ' ';
  width: 6px;
  height: 6px;
  position: absolute;
  right: 0;
  top: 6px;
  border-radius: 3px;
  background-color: #9596ff;
}

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

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>