使用::after为<hr>添加尾部圆点时元素出现在起始位置如何解决

问题原因 #

你当前的写法存在两个问题：

1. 没有给<hr>元素设置相对定位，position: absolute的伪元素会默认以最近的已定位祖先元素为基准偏移，没有的话就会参考根文档
2. 使用margin-left: -1px是向左偏移，自然会出现在水平线左侧

修复方案 #

方法1：修改CSS样式

给hr类增加相对定位，同时调整伪元素的水平定位规则，用right: 0让圆点贴到右侧：

.right {
  position: relative;
}
.right::after {
    content: ' ';
    /* 统一宽高做正圆形圆点 */
    width: 10px;
    height: 10px;
    position: absolute;
    /* 自动垂直居中，不用手动计算偏移值 */
    top: 50%;
    transform: translateY(-50%);
    /* 定位到父元素最右侧 */
    right: 0;
    border-radius: 50%;
    background-color: #9596ff;
    /* 原有边框和背景同色，不需要可以删除 */
    /* border: 5px solid #9596ff; */
}

方法2：配合Tailwind简化代码

不需要额外在CSS里写position: relative，直接在HTML的hr元素上添加Tailwind内置的relative类即可：

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

如果需要调整圆点的水平位置，直接修改right的数值即可，比如要让圆点超出水平线一点，就改成right: -5px。

内容的提问来源于stack exchange，提问作者lennytriestocode