Ankhena

Потому что вот так:

.icon-facebook:hover::before{
  color: red;
}

Либо:

.icon-facebook {
  color: #ccc;
}
.icon-facebook::before {
  content: "\e900";
}
.icon-facebook:hover{
  color: red;
}

Как-нибудь так: https://jsfiddle.net/5yxezsd6/

Спрайт должен быть не из symbol, а либо из набора symbol+view+use либо из svg.
Вот пример с вашим флагом и спрайтом из svg.
https://jsfiddle.net/g7t1nf0r/

Хотя последнее время я в большинстве случаев стала инлайнить прямо в css предварительно конвертнув с помощью URL-encoder for SVG

Вам остается только модифицировать и применить к своему случаю.
У вас этот "кусочек" должен быть псевдоэлементом.

но почему то в этот момент "войти" смещается

Логично, потому что жирный текст занимает больше места.

Поправить так:


Альтернатива: заменить абсолют на гриды, но нужно обернуть текст в span.

Не для всех браузеров

Да что за напасть?
Не нужно делать это абсолютами
https://qna.habr.com/q/1107394
https://qna.habr.com/q/1102624

Обычный градиент под нужным вам углом.
https://jsfiddle.net/ma20jnf6/
Либо треугольный псевдоэлемент.
Либо clip-path.
Либо transform skew и задвинуть за край окна и обратный для текста.
Ещё что-нибудь, что я забыла.

Для простейшего прогресс бара есть тег <progress>

Для градиента так и написать, указав точки перехода:

background: linear-gradient(to right, #8dff80 25%, #57c53b 25%);

Если это регулируется через JS, то разумнее делать это через кастомные свойства.

Можно ли как-то отменить эту зависимость?

Можно, с помощью свойств align-items или align-self

Зачем там псевдоэлементы?
Просто два фона, один прибит к верху body, другой к низу, остальное цвет.

Множественные фоны пишутся через запятую.

На всякий случай, потому что когда-то вам всё таки придется использовать и псевдо.
Во-первых, отрицательный z-index.
Во-вторых, свойство pointer-events.

Да, берете и засовываете его в data
Вот конвертер https://yoksel.github.io/url-encoder/

Ну уж не колесо, а всего лишь полоса :)

И не правда, полоса прокрутки у вас появилась гораздо раньше, чем были добавлены псевдо.
В тот момент, когда вы задали width: 100vw; для .experts_body.
Зачем?

Отступы у body убираются с помощью обнуления этих самый отступов margin: 0.

Заодно ещё почитайте про box-sizing, тоже скоро пригодится.

Такие вопросы решаются с помощью цветных рамок (outline, outline-offset, box-shadow) для элементов и псевдоэлементов.

Z-index в принципе работает не так, как хотелось бы большинству (мне впрочем тоже), потому что существует такая штука как контекст наложения.
https://habr.com/ru/post/166435/
css.yoksel.ru/kontekst-nalozheniya

Чтобы псевдо был под ссылкой, ему нужно задать z-index: -1, а у самой ссылки убрать вовсе.

Не нужно помещать кнопку на инпут.
Нужно задать фон оборачивающему их div.

Вы серьезно сплошной оранжевый цвет собрались задавать картинкой?

Варианта два:
1. Если логотип включает в себя оранжевую часть, то это одна картинка, желательно в формате SVG. Причем это <img>
Судя по тому, как написаны буквы названия, то и они являются частью лого.
2. Если логотип это только "буква", то оранжевое это background-color и border-radius. А сам логотип это снова тег <img>

Если всё же вам встретится необходимость сделать множественные фоны, то они просто пишутся через запятую.
Самый первый - верхний, последний - нижний. В серединке соответственно.

Потому что ваши блоки называются adv и режутся блокировщиками рекламы.

Гридами https://jsfiddle.net/2z0ohg3k/

Можно задать картинке vertical-align: top
Можно задать ей display: block
Можно обертке font-size: 0 (не люблю такой способ)

Убрать float left.
И вообще не использовать его не по назначению.
А назначение - обтекание одного элемента другими.
Для построение сеток используйте флексы или гриды.