JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
  <li class="menu__item"><a href="#" class="menu__link">Пункт 1</a> </li>
  <li class="menu__item menu__item_divider" role="presentation"></li>
  <li class="menu__item"><a href="#" class="menu__link">Пункт 2</a></li>
  <li class="menu__item menu__item_divider" role="presentation"></li>
  <li class="menu__item"><a href="#" class="menu__link">Пункт 3</a></li>
  <li class="menu__item menu__item_divider" role="presentation"></li>
  <li class="menu__item"><a href="#" class="menu__link">Пункт 4</a></li>
  <li class="menu__item menu__item_divider" role="presentation"></li>
  <li class="menu__item"><a href="#" class="menu__link">Пункт 5</a></li>
</ul>

SCSS

.menu {
  padding: 20px 0;
  text-align: justify;
  text-justify: newspaper;
  font-size: 0;

  &::after{
    content: '';
    display: inline-block;
		width: 100%;
		background: none;
	}

	&__item{
		display: inline-block;
		text-align: center;
		position: relative;
		&_divider {
			width: 8px;
			height: 8px;
			background-color: #000;
			transform: translateY(-50%) rotate(45deg);
		}
	}

	&__link{
		display: inline-block;
		font-size: 15px;
		text-decoration: none;
		text-transform: uppercase;
	}

}