Почему псевдоэлементы распространяются на дочерние элементы?

Ломаю голову, не могу сообразить.
Есть список вида ul li ... li ul
Мне нужно для всех li, у которых стоит класс "menu-item-has-children" добавить в конце определённый символ, но он также добавляется сразу для всех вложенных элементов.
Вот код:

<ul class="main">
	<li id="menu-item-1" class="menu-item menu-item-has-children menu-item-1"><p>Parent</p>
		<ul class="sub-menu">
			<li id="menu-item-2" class="menu-item menu-item-2"><p>Children 1</p></li>
			<li id="menu-item-3" class="menu-item menu-item-3"><p>Children 2</p></li>
			<li id="menu-item-4" class="menu-item menu-item-4"><p>Children 3</p></li>
			<li id="menu-item-5" class="menu-item menu-item-has-children menu-item-5"><p>Children 4 + Sub menu</p>
				<ul class="sub-menu">
					<li id="menu-item-6" class="menu-item menu-item-6"><p>Sub menu children 1</p></li>
					<li id="menu-item-7" class="menu-item menu-item-has-children menu-item-7"><p>Sub menu children 2 + sub menu</p>
						<ul class="sub-menu">
							<li id="menu-item-8" class="menu-item menu-item-8"><p>Sub menu children 1</p></li>
						</ul>
					</li>
				</ul>
			</li>
			<li id="menu-item-9" class="menu-item menu-item-9"><p>Children 5</p></li>
			<li id="menu-item-10" class="menu-item menu-item-10"><p>Children 6</p></li>
		</ul>
	</li>
</ul>

.menu-item-has-children p:after
{
	content: ' [>]';
}
.sub-menu .menu-item-has-children p:after
{
	content: ' [»]';
}

Песочница «здесь»

Другими словами мне нужно сделать так, что если какой-нибудь элемент имеет вложенные (дочерние) элементы, то обозначить его символом » в конце.