<hr>:after将元素放在

Question

我正在尝试使用::after在我的<hr>标记的末尾放置一个小圆点。但是相反，添加元素的方式就好像它是在添加::before之前添加的一样。为了设置<hr>的样式，我使用了Tailwind，但是使用CSS设置了::after样式。这是它现在的样子的图像，这个点在左边。我想把这个小点放在线的另一端，右边。

​

​

这是我的代码：

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

提前感谢！

Answer 1

您需要指定hr的position: relative，否则点将根据页面的其余部分进行定位。

​

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

​

Answer 2

由于您使用的是position: absolute;，因此需要添加right: 0;才能将其迁移过来。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;
    right: 0;
}

Answer 3

您有绝对位置，但没有提供放置说明。

我添加了

      right: 0;
      top: 0;

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

​

为了让这个点看起来更像你的图像：

​

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

​