Ankhena

outline-offset

Абсолюты позиционируются относительно ближайшего родителя с position отличным от static. Если его нет, то относительно body.

font-weight - соответствие слов и чисел
100 - Thin (Hairline)
200 - Extra Light (Ultra Light)
300 - Light
400 - Normal
500 - Medium
600 - Semi Bold (Demi Bold)
700 - Bold
800 - Extra Bold (Ultra Bold)
900 - Black (Heavy)

Вы подключили 400 и 600. Bold (700) скорее всего браузер сам как-то постарается эмулировать. Ну а про то как рисовать bolder он просто ничего не знает.

Обычный overflow-y. Если надо сдвигать выше 0, то div надо делать изначально больше.
https://jsfiddle.net/bfojyt17/

Либо сдвигом bg position https://jsfiddle.net/bfojyt17/1/

Ищите в настройках soft wrap и указывайте типы файлов для которых он нужен.
Либо View -> ActiveEditor -> soft wrap

1. Псевдоэлементом с transform rotate https://jsfiddle.net/5jobc9q7/ (угол, положение поставьте свои, псевдоэлемент примените к одному из внутренних блоков)
2. Градиентом
3. SVG
4. Просто картинкой

Используйте абсолют.
С трансформом место остается зарезервированным.

Давайте разбираться.
em - это размер шрифта родительского элемента.
У большинства браузеров шрифт по умолчанию 16px.
Предположим, что для контентного блока задан шрифт 1em и больше никаких правил для шрифта для родительских элементов не было и в браузере не установлен увеличенный или уменьшенный шрифт. Значит, размер шрифта будет 16px.
Мониторы бывают разного размера и с разным разрешением. Например, 13" ноут может быть с разрешением и 1920 и 1280 (не ограничиваясь этими размерами).
Соответственно, 16px будут выглядеть по разному на одном и том же мониторе при смене разрешения.

Вы можете задать размер шрифта (и не только шрифта) в vw. Но на мелких экранах ждет сюрприз: шрифт окажется очень мелким, возможно, даже и вовсе нечитаемым, хоть и будет соответствовать вашему требованию.

Убираете спаны с кавычками, делаете их CSS'ом с помощью свойства quotes псевдоэлементами и позиционируете как нужно.
После этого еще избавляетесь от мусора в разметке.

div::before {
  content: open-quote;
}
div::after {
  content: close-quote;
}
div {
  quotes: '«' '»';
}

Средствами CSS: бэкэнд должен выдавать их в обратном порядке. Тогда сработает селектор +. Визуально обратно поменять порядок с помощью флексов.

Либо на js с помощью previousElementSibling

Дмитрий,
работайте с всегда открытыми инструментами разработчика и галочкой

ctrl+c ctrl+v
https://jsfiddle.net/4ed5xjw7/

В псевдоэлементе никак. Замените на span|div и т.д.

Потому что после #list1 нет .ul1
Чтобы к нему попасть нужно выйти на уровень наверх, а css этого не умеет.

https://support.google.com/webmasters/answer/47334...

Примерно так: https://jsfiddle.net/w95gy0uh/
Поскольку, высота фото одинакова и известна, то градиентом.
https://html5book.ru/css3-gradient/

https://jsfiddle.net/futqLmn7/

.financepage-main__items:hover  .item-text{
  цвет 
}
.financepage-main__items:hover  .item-openfolder (или .item-open, смотря у кого начальный цвет задан){
  цвет 
}

Современные форматы шрифтов woff и woff2. Сначала подключается woff2.
Почему не правильно отображается шрифты на safari?

Можете поставить что угодно на каком угодно расстоянии