Сергей

Вот, адаптивно. Зависит от размера шрифта. Здесь не подчёркивание, а бэкграунд, задаём через псевдо элементы и сдвигаем через абсолютное позиционирование. Ещё можно сделать через transform:

Во втором комменте к вопросу вам правильно подсказали.
https://jsfiddle.net/85q5vq4k/2/
Стили сами свои пропишите

Можно подключить полностью все форматы шрифтов. НО! Первым подключать WOFF2, а после него WOFF. И не надо бояться больших размеров остальных форматов. Дело в том, что браузеры их не выкачивают.
Любой браузер идёт по списку сверху->вниз. И если он поддерживает формат WOFF2 - он его скачает и остальные форматы проигнорирует. А если он его не поддерживает - пойдёт дальше вниз по списку, до первого поддерживаемого им формата. Так что вы зря волнуетесь. Подключите вы один формат или 101. Разница будет только в размере кода CSS на пару байт.

А вообще, на сколько мне известно, тот же Google Fonts при подключении онлайн - выдаёт только WOFF2 и потом WOFF. Этого достаточно для большинства проектов. Всё дело в том, какие браузеры должен поддерживать сайт по мнению заказчика.

Попробуйте: https://refreshless.com/nouislider/
Удобный в работе, много настроек. И стилизовать можно как угодно.

Тоже искал когда то подобное решение. Но всё что нашёл - Class Extractor

Но он работает по другому принципу. Выделяешь нужный код HTML, вводишь команду Class Extractor, и в буфер копируются все имина выделенных классов сразу с точками и фигурными скобками.

Если я правильно понял вопрос. У слайдера есть специальная настройка, которая позволяет задавать разные значения в зависимости от ширины экрана.

responsive: [ //указываем настройки для адаптивного слайдера.
    {
      breakpoint: 1024, //указываем ширину экрана
      settings: { //здесь настройки слайдера для этой ширины
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
 ]

То есть: задаём параметр responsive: [], и внутри квадратных скобок, в фигурных скобках задаём breakpoint, указываем ширину экрана и настройки слайдера для этой ширины.

kenwheeler.github.io/slick

Поищите на странице, там есть пример кода, который я привел выше. Он так и называется Responsive Display

handheld уже не поддерживается. И all вам тоже не нужен.
Просто напишите так:

@media screen and (max-width: 1023px) {
.block {
  position: fixed;
  display: none;
  width: 50px;
  height: 50px;
  }
}

Тогда стили будут подхватываться, когда ширина рабочего окна браузера будет равна либо меньше 1023 пикселей.

Когда только начал баловаться брикетом использовал эту штуку. Но что-то не прижилась. В атоме такое расширение тоже есть: quick-editor
Комбинация клавиш по умолчанию: ctrl+shift+e
В саблайме не знаю, я им не пользовался уже больше когда.
Atom больше по душе стал.

Ещё попробуйте slick слайдер.
Возможности большие.

Вот по нему урок на канале: https://www.youtube.com/watch?v=WNyRZytNxl4
А вот результат: master-css.com/demo/slick

А подключить этот скрипт не в шапке сайта, а перед закрывающим тегом
</body>

- нельзя что ли?

Одинаковое нельзя, нарастающее можно.
Другое дело, как потом разобраться в таком коде, если будешь верстать, как Adobe Muse :)

Вы пробовали этому элементу добавлять класс с display:none; ?

Обычно заказчики не смотрят на качество кода, им абы работало быстро и смотрелось хорошо везде.
Так что если смотреть глазами заказчика - где адаптивный дизайн???

Посмотри вот это:
fittextjs.com

Хорошо там, где нас нет :) Если поискать темы, здесь тоже создавались, то такие же вопросы задают и front-end-щики. Переквалифицируетесь и потом тоже будете писать, что это:

больше занятие для души, нежели способное хоть как-то обеспечить.

Как раз таки на занятиях для души люди больше всего и зарабатывают. Надо только придумать, что продать и кому.

Сама анимация начинает срабатывать при прокрутке при помощи js. А реализована она на CSS3. Вот, посмотри парочку видео по анимации, поймешь, как такое реализовать своими силами:

Анимация с keyframes: https://youtu.be/WMu4HhAtrZI
Как использовать тот же wow.js: https://youtu.be/7gMYtFGjg3s
Здесь в конце видео есть инфа, как сделать простенький скрипт, который будет срабатывать именно при прокрутке:
https://youtu.be/oLCgXG7E8zY

Он не считается вместе со скроллбаром. Он просто не влазит по ширине в окно браузера. У тебя же там горизонтальный скроллбар внизу. Хром так всегда показывает блок, когда сайт по ширине не влазит.
Если ширина не критична, напиши вместо width - max-width.

А почему не CSS3?? Или это сугубо в учебных целях делаете? :)

Вы бы код показали.