Как поменять схему переноса?

Question

[Antonio09]

update. речь про нормальный перенос > и >>


сейчас


ожидаемый результат

Comments

[Ankhena]

У меня интереснее вопрос.
Зачем before и какие-то фокусы, если вам нужно, чтобы стрелка стояла ПОСЛЕ содержимого??

[Antonio09]

Ankhena, требование такое
чтобы пользователь сам не писал > и тд

[Ankhena]

Antonio09, after тоже будет писать не пользователь!

[Ankhena]

Antonio09, https://jsfiddle.net/tjrq90ok/
для того, чтобы добавлять/убирать псевдоэлементы для элементов со ссылками или без них, нужно расставлять классы.

[Арсений Матыцин]

Ankhena, ну вообще попроще на самом деле можно сделать, развернуть порядок крошек в бэке и селекторами набрать в них псевдоэлементы по условиям (можно даже через + но: пока БЭМ, привет удобство) и развернуть в визуалке.

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

[Ankhena]

Арсений Матыцин, Арсений, поделитесь, как вы решили что goods__list это хлебные крошки?
Просто я считала, что это неверная разметка многоуровневого меню.

[Antonio09]

Ankhena, это хлебные крошки

[Antonio09]

Ankhena, https://jsfiddle.net/tjrq90ok/
для того, чтобы добавлять/убирать псевдоэлементы для элементов со ссылками или без них, нужно расставлять классы.

------------------------------
так результат не такой ведь

[Ankhena]

Antonio09, если это хлебные крошки, то не нужны классы.
Если я правильно вас понимаю.

https://jsfiddle.net/trynkd94/

И:
goods__list = список товаров
хлебные крошки = bread crumbs
Названия классов должны быть ПОНЯТНЫ другим людям, которые будут смотреть ТОЛЬКО код.

[Antonio09]

Ankhena, правильно))
спасибо огромное) низкий Вам поклон)))

[Antonio09]

Ankhena, если хотите можете как ответ написать - я отмечу

[Ankhena]

Antonio09, устала, не хочу, сегодня только вам ответить пришла сюда.

[Antonio09]

Ankhena, благодарствую)

[Арсений Матыцин]

Ankhena, на картах погадал.

Answer 1

[Арсений Матыцин]

1. Разобраться в CSS
2. display: inline-block; вот это нахер.
3. Либо родителю добавить display:flex;flex-direction:column; → иметь дело с последствиями.

UPD: после дополнения вопроса словами

речь про нормальный перенос > и >>

Псевдоэлементы должны быть смещены влево и быть не :before, а :after.

Comments

[Antonio09]

Арсений Матыцин, тут у меня потребовали использовать display: inline-block;

[Antonio09]

Арсений Матыцин, извините
но зачем тут flex-direction:column??

https://jsfiddle.net/q8as7cv2/
но проблема таки осталась

[Арсений Матыцин]

Antonio09, что флекс был не строкой (дефолтное значение), а колонкой.

[Antonio09]

Арсений Матыцин, я понимаю Вас
но суть в том чтобы оно само переносилось

тоесть или как у меня сейчас с inline-block ли flex-wrap: wrap
но вопрос не в этом..
речь про нормальный перенос > и >>

[Арсений Матыцин]

Antonio09, сдается мне, трщ, вы и сами не понимаете, что хотите. Ибо:

1. Требование на пикче — предложены 2 варианта, один правильный, второй хороший.
2. «тут у меня потребовали использовать display: inline-block;» — это бред, если есть вменяемое обоснование — выкладывайте.
3. Если вся эта канитель для того, чтобы обеспечить переносы при мобильном разрешении — вопрос поставлен некорректно, так как ответ на поставленный вопрос в пункте 1 и в ответе выше.

[Арсений Матыцин]

Antonio09, ага, дополнил.

Вот это «речь про нормальный перенос > и >>» по-человечески подними в свой вопрос.

[Antonio09]

Арсений Матыцин , Псевдоэлементы должны быть смещены влево и быть не :before, а :after.
---------
слабо представляю. через абсолют? как мне сказали тут он не нужен

[Арсений Матыцин]

Antonio09, смещена инициализация. А не позиционирование.

[Antonio09]

Арсений Матыцин, ну я вот попробовал
https://jsfiddle.net/q8as7cv2/2/