Как сделать на чистом css, когда в родительском пункте есть разделы, то через before показать стрелочку?

Question

[азаза]

Как сделать так на чистом css, когда в родительском пункте есть разделы, то через before показать стрелочку возле этого пункта?

Answer 1

[Вадим Кот]

Нужно делать это на чистом html - добавлять классы пунктам, которые содержат вложенные пункты.
Должен быть вот такой пункт меню

<li class="menu__item menu__item--has-children"></li>

Comments

[азаза]

это не вариант
меню не статичное

[Вадим Кот]

natojezlo, Так если меню динамически выводится то и должна быть возможность добавить такие классы.

возможно ли на css выводить как бы по условию

Вот по условию на бекенде и нужно формировать нужную разметку, как это и делается в большинстве случаев.

[азаза]

Вадим Кот,
данное меню формирует классы только на активные пункты
а мне нужно на выпадающие
движок ковырять не хочу
где то видел подобную реализацию на css или js, но не найду

[Вадим Кот]

natojezlo, Вообще это должно делаться на бекенде, но если на фронтенде хотите поморочиться, то ищите что то типа javascript check if menu link has submenu

[азаза]

Вадим Кот, Спасибо

Answer 2

[Евгений Вольф]

Если я правильно понимаю Ваш вопрос, то либо через селектор :has(), который пока из черновиков не вышел. Либо рисуйте эту самую стрелочку у первого пункта, который "есть" (а если его нет, то и стрелочки соотв. не будет). Либо через известное место... Но последнее я бы не рекомендовал.

Comments

[азаза]

может я не правильно сформулировал
имеется меню, которое выводится циклом
не статическое
пункты могут добавляться, могут убавляться

возможно ли на css выводить как бы по условию
если есть в разделе подразделы, то показываем стрелку, если нету то соотвественно нет

[Евгений Вольф]

natojezlo, я думаю при выводе меню (если речь идёт о генерации оного на сервере) Вам просто нужно добавить класс к элементу, который будет содержать содержать (или наоборот, не будет содержать) дочерние пункты меню и в зависимости от наличия/отсутствия этого класса - рисовать стрелку.

[азаза]

Евгений Вольф,
ковырять движок нет возможности да и желания
движок дает классы только активным пунктам

[Евгений Вольф]

natojezlo, тогда либо JS, либо... ждать пока :has() выйдет из состояния черновика.

Answer 3

[Алексей Уколов]

Без хаков с абсолютным позиционированием этого сделать нельзя. А с хаками будет работать нестабильно, на то они и хаки.
Через :before это сделать совсем нельзя.

Comments

[азаза]

я имел ввиду before что бы через сss задать стиль стрелки

[Алексей Уколов]

Я понял, что вы имели в виду.