CODEWITHSUNDEEP
htmlcss
lennytriestocode
lennytriestocode

Reputation: 13

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

enter image description here

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!

Upvotes: 0

Views: 158

Answers (3)

Rob Moll
Rob Moll

Reputation: 3453

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

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

Upvotes: 0

Azu
Azu

Reputation: 1550

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

Upvotes: 1

Cyberdelic Soup
Cyberdelic Soup

Reputation: 60

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;
}

Upvotes: 0

Related Questions