JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

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

SCSS

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

	&__item{
		display: inline-block;
		text-align: center;
		position: relative;
		&_last{
			width: 100%;
			background: none;
		}
		&:after{
			content: '';
			position: absolute;
			top: 50%;
			right: -50%;
			width: 8px;
			height: 8px;
			background-color: #000;
			transform: translateY(-50%) rotate(45deg);
		}
		&:last-child,&:nth-last-child(2){
			&:after{
				display: none;
			}
		}
	}

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

}