Положение нескольких псевдоэлементов

Question

Я создаю карусель с показателями ниже.Вот мой код:

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

Я хочу, чтобы индикаторы выглядели как левая часть фотографии, но результат выглядит как правыйбоковая сторона.Почему псевдоэлементы не позиционируются относительно своих родителей <li>?

Answer 1

набор .product-slick-dots li {position:relative}

.product-slick-dots li {
    width: 8px;
    height: 8px;
    background: #00000042;
    border-radius: 100px;
    display:inline-block;
    vertical-align: middle;
    margin: 0 4px;
    cursor: pointer;
    position:relative
}
.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;
}

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

Answer 2

Добавьте position: relative к вашим li элементам, в противном случае все psuedolements расположены в одном и том же месте (друг над другом) относительно первого расположенного предка (или body)