Как правильно сделать псевдо-элемент треугольник в меню?

Question

[Xva1er]

Сайт делается под вордпресс, использую сетку бутстрап и адаптивную верстку вордпресса.
Хочу вставить псевдо-элемент треугольник в меню, но по какой-то причине он встает не туда куда надо, хочу сделать что-то типа такого.
Хочу сделать ее правее.
вот часть кода шапки https://codepen.io/Xva1er/pen/GRzVKmm

Comments

[ProjectSoft]

Это что за чудо?

.menu-item-has-children {
	width: 0;
	border: 4px solid transparent;
	border-bottom: none;
	border-top-color: #8a8383;
	content: '';
	vertical-align: middle;
	display: block;
	position: relative;
	right: 5px;
}

Почему вы это применяете непосредственно к li, где свойствоcontent: ''; вообще не применим, а не к псевдоэлементу данного блока ::after, где content: ''; уже будет обязателен?
Данная запись должна выглядеть так:

.menu-item-has-children::after {
	width: 0;
	border: 4px solid transparent;
	border-bottom: none;
	border-top-color: #8a8383;
	content: '';
	vertical-align: middle;
	display: block;
	position: relative;
	right: 5px;
}

И убрать стили для ::before у ссылки .top-nav_menu li a::after. Вообще удалить. Этот стиль вам не нужен.

PS: естественно я не смотрел на правильность положения данного элемента. Это не ложится в суть данного вопроса.

[Xva1er]

ProjectSoft, Спасибо разобрался