SeriousAnonymous

Клик может принять и ссылка и элемент списка.МОжно ловить оба варианта:

Ссылку сбираю примитивно, как строку текста. Правильнее как предложил felony13twelve через URL.

userName.split(' ').map(word => word.substr(0,1).toUpperCase() + word.substr(1).toLowerCase()).join(' ')

Да просто ширина псевдо 100%. Зачем вам разбивать на несколько полосок?
Либо можно вообще заменить псевдо на фон с полоской, сделанной градиентом.
Если хочется в несколько, то вам поможет flex-grow для псевдо.

Например, так:

Заменить :valid на :not(:placeholder-shown).

Самому элементу, соответственно, добавить непустой атрибут placeholder. Поскольку реально он не нужен, то пусть это будет пробел - чтобы было не видно.

align-items: flex-start
По умолчанию стоит stretch (растяжение).