Ankhena

Использовать свойства counter-reset и counter-increment для псевдоэлементов вложенного списка.
Жирность, думаю, сами поставите.

Проще всего transform: skew() (значение укажите сами) для псевдоэлемента.
Менее удобная альтернатива: поворот блока и потом обратный поворот для теста.
Во втором варианте может быть размытие.

https://jsfiddle.net/9byhnupx/

Зачем для этого вообще позиционирование?
https://jsfiddle.net/e1r0zojL/
Или флексами.

Если все таки очень хочется позиционированием, то центр это:

left: 50%;
transform: translateX(-50%);

Вертикальное позиционирование при этом разумнее считать снизу, а не сверху. Вдруг текста будет на 2 строки?

Вы можете
- задать спану

display: inline-block;
vertical-align: top;

- задать их обертке display flexи дальше оперировать align-items
- аналогично гридами

Если вы зададите спану display: block, то он встанет вообще НАД textarea

Можно использовать гриды. Контейнер с высотой 100vh и 2 строки. min-content и 1fr

Просто нарисовать фоновыми градиентами к одному блоку.
https://jsfiddle.net/02hfmet3
Адаптивный и с контентом внутри https://jsfiddle.net/kn3ha48d/

Есть еще вариант с 2мя псевдоэлементами, но подходит только для однотонного фона и фикс ширины. Во-первых, из-за обводки, во-вторых, из-за округления. Если блок будет иметь фикс ширину, то округление не важно, просто нужно скорректировать в зависимости от четности или нечетности.
https://jsfiddle.net/xm91ny4q/

.image:hover .but
Внутри элемента с классом .image нет элемента с классом .but -срабатывать не на чем.

Так вам нужно? https://jsfiddle.net/Ln20rckx/

funkydance,

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

relative, transform и ширину указать.

https://jsfiddle.net/2nh0xbvo/

Простейшая вариация
https://jsfiddle.net/pd7segt0/

Только у себя в head добавьте

<meta name="viewport" content="width=device-width, initial-scale=1.0">

без него @media не будут работать.

Градиентом

Количество введенных символов считайте на js и подставляйте в --color-width

body {
margin: 0
}

Можно открыть спецификацию и посмотреть из чего состоит свойство box-shadow

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

И вставить свои параметры

box-shadow: 0 15px 20px rgba(0, 0, 0, 0.45);

Меняется, начните вводить текст и увидите.
Цвет placeholder меняется через псевдоэлемент ::placeholder

P.S. Чтобы по сто раз не писать цвет: белый, можно использовать слово inherit, тогда поля унаследуют цвета от родителя (у вас белый задан форме, от него и унаследуют)

h1 {
  position: relative;
  width: fit-content;
  padding:  0 10px;
}

h1::before {
  content: "";
  position: absolute;
  display: block;
  height: 100%;
  background: #fff;
  animation: foo 3s;
}

@keyframes foo {
  0% {
    left: 0;
    right: 100%;
  }

  50% {
    left: 0;
    right: 0;
  }

  100% {
    left: 0;
    right: 100%;
  }
}

Зачем вы хедеру задали ширину 100px? Он ведь должен тянуться на всю ширину страницы.
Абсолют вам, вероятно, тоже не нужен. Возможно, sticky.

И если привести ваш код в порядок, то всё будет работать
https://jsfiddle.net/0vsk4qyf/

P.S. Навигацию хорошо бы делать списком, вложенным в nav.

UPD:
Модифицированный вариант, разбитый на 2 псевдо. Будет работать для любой ширины ссылок


OLD
Примерно так, градиент нужно доводить до ума (это самостоятельно) или заменить на SVG

Примерно так