Как правильно сделать иконку возле текста?

Question

[sciencefront]

чтобы она не была слишком далеко,
а возле текста
речь о квадрате справа( для простоты была замена с иконок на квадрат)
https://codepen.io/Olya097/pen/xxWMdaa

через спан тоже пробовала - не особо

Comments

[Ankhena]

чтобы она не была слишком далеко,
а возле текста

За отступ текста от края ссылки отвечает padding

[sciencefront]

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

[sciencefront]

Ankhena, псевдо слишком далеко не из-за паддинга

[Ankhena]

sciencefront,

псевдо слишком далеко не из-за паддинга

ну...
уменьшите паддинг, будет ближе

или спозиционируйте псевдо ближе

[sciencefront]

Ankhena,

ну...
уменьшите паддинг, будет ближе

он то будет ближе. Но не особо близко. Прям возле текста нужно. А тут вроде как это проблено

[sciencefront]

Ankhena убираю паддинг справа
слишком далеко.

[sciencefront]

Ankhena,
или спозиционируйте псевдо ближе
если в одном месте поправится , то в другом будет налезать на текст

[Ankhena]

sciencefront, кажется, пора отдохнуть, если так происходит.

Квадратик 20px, отступ 29px => текст от квадратика в 9px.
Если вы поставите отступ 20px, текст прилипнет к квадратику.

[sciencefront]

Ankhena, так речь о совсем другом квадрате. Ну он почти квадрат. Ширина 5
высота 4

[sciencefront]

Ankhena, выше был скрин

[Ankhena]

sciencefront, для li width: min-content;
И убрать jc space-between

[sciencefront]

Ankhena, не будет растягиваться на всю ширину контейнера...

[Ankhena]

sciencefront, тут придется определиться. Либо туда либо туда. Т.е. либо займет все и тогда будут расстояния. Либо вам не нужны расстояния между и значит, не займет всю строку.

Ну либо по середине, между текстами.

[sciencefront]

Ankhena, иначае никак? даже если текст обернуть в спан и спозиционировать псевдо от него?

[Ankhena]

sciencefront, нарисуйте как нужно

[sciencefront]

Ankhena, примерно так (это планшет)
а на декстопе оно вообще не переносится
ибо всё влезает

[Ankhena]

sciencefront, или не убирайте space-between

[sciencefront]

Ankhena, есть оно ли нет- не особо в нем дело

[Ankhena]

sciencefront,

есть оно ли нет- не особо в нем дело

я не понимаю, что вам не так: space-between в наличии, черные квадратики прилеплены справа.
https://codepen.io/AnnaSummer/pen/PoRVKxx
Что не так-то?

[sciencefront]

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

я понимаю, что можно убрать justify-content: space-between;
но нужно чтобы итемы растягивались до конца контейнера

[Ankhena]

sciencefront,

большие оступы между пунтами

space-between равномерно распределяет отступы между элементами.

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

Сейчас в песочнице именно так и происходит

нужно чтобы черные квадратики прилеплены справа

В песочнице прилеплены. Вы видите что-то другое?

[sciencefront]

Ankhena,в этом и проблема
(большие оступы между пунктами )
ожидалось отступ по 10 или 20 (не важно) , чтобы задать можно любой
и если отступ будет по 20 то текст в пунктах больше влезет

[Ankhena]

sciencefront, да, так и есть

При min-content для li:

Если вы зададите фикс отступ и space-between, то элементы равномерно распределятся, отступы будут большими, но не меньше указанного.
Если вы зададите только space-between, то элементы равномерно распределятся, отступы будут большими.
Если зададите только фикс отступ, то элементы не займут весь контейнер, отступы будут фикс.

Ещё вы можете задать min-content не для li, а для ссылок. А для li, скажем, flex-grow: 1.
Тогда между li будет фикс отступ. А стрелка прижата к тексту.
При отсутствии декоров (фонов, рамок) визуально это ничего не изменит.
https://codepen.io/AnnaSummer/pen/WNzPZqp

Пока вы сами себе противоречите. То хотите space-between, то фикс отступы.
Первая песочница соответствует вашему срину из комментария

примерно так (это планшет)

Это:

ожидалось отступ по 10 или 20 (не важно) , чтобы задать можно любой
и если отступ будет по 20 то текст в пунктах больше влезет

ещё меньше понятно.
Если отступы между пунктами будут по 20, а не по 10, то для текста останется меньше места. А не то, что вы пишете.

[sciencefront]

Ankhena, прошу прощение
в этом и проблема.

хотят черные квадратики прилеплены справа
и чтобы отступы menu__elem можно было контролировать

justify-content: space-between;

дает 80. А нужно 20. Это слишком большая разница ( у меня так)

но главная проблема в том , что текст пунктов иногда слишком рано переносится

[Ankhena]

sciencefront, да, текст ведет себя именно так.

[sciencefront]

Ankhena, можно поправить?

[Ankhena]

sciencefront, спеку-то?
Думаю путь будет нелегким :)
Или геометрию?

Возможно, js покажется вам полегче.

Можете поставить br и убирать их через media (или совместно с js).

Проще всего из этого поправить дизайн или дизайнера.

[sciencefront]

Ankhena, я не про это..
может не так поняли..

Я так понимаю ,что нужно псевдо вынести в отдельный элемент
текст в спан
и обернуть это в враппер

и тогда текст будет более корректно ввести

ul>li>a> span>span img

[Ankhena]

sciencefront,

и тогда текст будет более корректно ввести

Да?
Ну ок, покажите потом, пожалуйста.

[sciencefront]

Ankhena, простите, нельзя вроде
тогда вижу только один вариант - не делать квадратики псевлоэлементами
или это бред?

[Ankhena]

sciencefront, мне кажется, что я уже все варианты перечислила, которые приходили в голову.
Мне больше всего нравится вариант про дизайнера.

Answer 1

[alexalexes]

Чтобы применить свойство text-decoration на названии пункта меню, но не применять на псевдо элементе, нужно название обернуть в span:

<a href="#" class="menu__item menu__item--sport"><span>Зимний спорт</span></a>

Чтобы псевдо-элемент after был вплотную к названию, он, как вариант, должен быть строчным элементом. То есть, нужно отменить для него абсолютное позиционирование. Также, его нужно изобразить символом, а не геометрическим прямоугольником:

.menu__item
{
  text-decoration: none;
}
.menu__item > span
{
  text-decoration: underline;
}
.menu__item:after
{
  position: unset;
  content: '▪';
  margin-left: 5px;
}