Гибкий горизонтальный список 100% ширины с justify-content: равномерно в пространстве, как разместить маркеры в центре?

Question

У меня есть горизонтальная панель навигации, которая представляет собой список UL с LI для каждого пункта меню, который имеет display:flex и justify-content:space-evenly

Я не могу зафиксировать ширину UL, она должна быть такой же ширины, как и ее контейнер, и я не знаю количество элементов.

Как я могу с помощью чистого CSS и без добавления тегов в html поместить маркеры всегда точно в середину свободного пространства между элементами?

Answer 1

Вы можете создать что-то для этого, используя псевдоэлементы элементов li для маркеров и display: contents;, чтобы рассматривать их как прямых потомков ul-контейнера, что означает, что они помещены точно в середину реальных элементов. Однако это работает, только если внутри отдельных элементов li есть только один «настоящий» дочерний элемент (элемент a в моем примере ниже)

ul {
display: flex;
padding: 0;
margin: 0;
justify-content:space-evenly;
align-items: center;
}

li {
display: contents;
list-style-type: none;
position: relative;
}

li:not(:last-child):after {
content: "";
width: 5px;
height: 5px;
border-radius: 5px;
background-color: currentcolor;
display: block;
}

<ul>
<li><a href="#">Point 1</a></li>
<li><a href="#">Point 2</a></li>
<li><a href="#">Point 3</a></li>
<li><a href="#">Point 4</a></li>
</ul>