Да градиентами 2 полоски на фоне нарисовать и дело с концом.
Как выравнивать дальше, зависит от шрифта. Можно менять пробелы на узкие пробелы, баловаться с отступами и т.д.
Да просто ширина псевдо 100%. Зачем вам разбивать на несколько полосок?
Либо можно вообще заменить псевдо на фон с полоской, сделанной градиентом.
Если хочется в несколько, то вам поможет flex-grow для псевдо.
Потому что margin это внешний отступ, в данном случае, от футера до его родителя body.
Но body закончился вместе с окном браузера, если вы зададите ему фон, то увидите это.
Вы сказали футеру, что он должен взять себе ширину body и еще добавили margin'ы. Пока футер был просто 100% он ровненько помещался в body (хорошо, что у body нет padding). Но вместе с margin вся эта композиция превышает размер body.
Очень интересно, почему текст подписи вы считаете неконтентным, а картинку не имеющую смысла наоборот, контентной?
И с семантикой проблемы. Это ведь список, а не разрозненные div. А может ещё и ссылки на разделы портфолио.
Итого: список, в каждом элементе либо <a> либо <span> (буду называть текстовым блоком). Картинка псевдоэлементом.
Каждый элемент это грид в одну ячейку. (Раньше это делали абсолютами, теперь это не нужно) Внизу псевдо с картинкой, наверху текстовый блок
В начальном положении текст прозрачный, при наведении меняется.
Можно менять прозрачность всего блока или только фона.