Html 定位多个伪元素

我正在创建一个带有以下指示器的旋转木马。 这是我的密码：

<ul class="product-slick-dots">
    <li aria-hidden="true" data-slick-index="0"></li>
    <li aria-hidden="true" data-slick-index="1"></li>
    <li aria-hidden="true" data-slick-index="2"></li>
    <li aria-hidden="true" data-slick-index="3"></li>
</ul>


.product-slick-dots li {
    width: 8px;
    height: 8px;
    background: #00000042;
    border-radius: 100px;
    display:inline-block;
    vertical-align: middle;
    margin: 0 4px;
    cursor: pointer;
}
.product-slick-dots li::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -6px;
    margin-left: -6px;
    width: 12px;
    height: 12px;
    background: #FFFFFFA6;
    border-radius: 150px;
    border: 1px solid #33333366;
}

.产品光滑圆点李{
宽度：8px；
高度：8px；
背景：#00000042；
边界半径：100px；
显示：内联块；
垂直对齐：中间对齐；
利润率：0.4px；
光标：指针；
}
.产品光滑点李：：之前{
内容：''；
位置：绝对位置；
最高：50%；
左：50%；
利润上限：-6px；
左边距：-6px；
宽度：12px；
高度：12px；
背景：#FFFFFFA6；
边界半径：150px；
边框：1px实心#333333 66；
}

---

我想让指示器看起来像照片的左侧，但结果看起来像右侧。为什么伪元素不相对于它们的父元素定位？

将

位置：相对
添加到
li
元素，否则伪元素相对于第一个定位的祖先（或
主体
）都位于同一位置（彼此之上）设置
。产品光点{位置：相对}
。产品光滑圆点li{
宽度：8px；
高度：8px；
背景：#00000042；
边界半径：100px；
显示：内联块；
垂直对齐：中间对齐；
利润率：0.4px；
光标：指针；
职位：相对
}
.产品光滑圆点李：以前{
内容：''；
位置：绝对位置；
最高：50%；
左：50%；
利润上限：-6px；
左边距：-6px；
宽度：12px；
高度：12px；
背景：#FFFFFFA6；
边界半径：150px；
边框：1px实心#333333 66；
}