imko, так
1. Если лейбл не связывается с инпутов по for, то инпут должен лежать внутри лейбла. И тогда не надо их накладывать так сложно.
2. Инпут вообще скрывают для таких дел (доступно, не через dispalay:none). Или я чего-то не поняла в вашей идее? Зачем он там видимый?
Может скринчик того, что нужно в реальности?
p.s. вы же можете представить сколько сил у меня ушло, чтобы промолчать про идею делать табы на инпутах в целом? :)))
Если вы уверены в том, что фон и мужик всегда должны иметь одинаковое взаиморасположение, то можно:
1. Слить мужика и фон в одно изображение.
2. Использовать относительные единицы (%, vw) и пропорции.
Я вот не очень уверена в этом.
Либо тогда и тексты и все остальное должно масштабироваться также. Т.е. vw, clamp и т.д.
Очевидная проблема в том, что при расширении экрана, отличимом от макета все сломается.
Сначала нужно описать как оно должно себя вести на самом деле на родном языке. Можно нарисовать.
Т.е. что от чего зависит, как и куда должно или не должно двигаться. К какой точке прибито, если не должно. И т.д.
Либо спросить у дизайнера, если с ним есть связь и это его дело, а не ваше.
Дичь какая-нибудь с чередованием ячеек типа min-content 16px.
Для четных (или у вас там класс) правый отступ на это 16 для визуального отступа и выравнивание justify-self: end, чтобы содержимое вывалилось налево.
Но при этом, конечно, нет никакой гарантии попадания в размер нечетных ячеек, если сразу не был задан размер. Либо определять его js.
А то, что скажу дальше вам, наверное, не понравится.
Напрашивается вывод об ошибке в структуре.
Лучше всего показать истинную задачу, а не вывод из неё, как сейчас.
Тогда, возможно, найдется более гармоничный вариант решения.
Сколько угодно.
Но имея в виду, что это тег предназначенный для основной навигации. Т.е. если меню дублируется, то второе не будет nav.
картинки
Нет там никаких "картинок".
Есть продолжение списка ссылок/кнопок. Просто они не имеют видимого текста, а иконки это их украшения.
Внутри элемента делают доступно скрытый (гуглите visually-hidden) span, а иконку вставляют псевдоэлементом и/или фоном/маской.
sharpsss, градиентами https://jsfiddle.net/Ankhena/n5b97ovh/
Старая песочница, придется смотреть через vpn, если вы в России или РБ.
Сейчас расчеты можно упростить за счет кастомных свойств.
ARCHXTEKK,
1. Проще pointer-events: none
2. Вместо абсолюта - гриды.
3. Но вы правы в том, что фоновая картинка это украшение и делается через css, а не вставляется как img в разметку.