Sensei

Не псевдокласс, а псевдоэлемент) Псевдоэлементы вставляются внутрь элемента. Перед или после контента, соответственно. Но input -- пустой элемент. У него нет контента, и вставлять псевдоэлементы просто некуда.

Gulp -- более общий инструмент для запуска задач, и сам по себе сборщиком не является. Поэтому я бы не стал сравнивать его с Webpack. Тем более, что последний можно использовать как плагин к первому. Утверждать, что инструмент устарел только лишь потому, что есть другой, более удобный вам -- немного странно)

Вариант попроще, на флоатах https://jsfiddle.net/n4s9nxy4/

можно так сделать https://jsfiddle.net/caa1g5w2/2/

Лайн-боксы никуда не растягивались и не расширялись. Во втором блоке у вас текст занял четыре строки, и браузер создал для каждой из них свой лайн-бокс. Базовая линия последнего четвертого лайн-бокса и есть базовая линия всего блока.

Высота строки здесь ни при чем. Базовая линия проходит по нижней границе символов, без учета выносных элементов. На каждую строку создается свой отдельный лайн-бокс. И базовой линией inline-block считается базовая линия последнего лайн-бокса внутри него. https://jsfiddle.net/g0LLsy1e/ Обратите внимание, что, не смотря на разную высоту строки и размер кегля, нижняя граница текста внутри первого блока идет вровень с нижней границей последней строки во втором.

Не вижу смысла создавать экземпляр, когда можно обратиться к прототипу конструктора)

Я же вам написал выше как починить, и у вас даже все получилось) ul a { vertical-align: top; }

Вроде того, если я вас правильно понял. Вообще, overflow: hidden скрывает переполнение, а остальное, скорее, побочные эффекты)

У inline-block базовая линия проходит через последнюю строку внутри него. Но когда вы задаете overflow отличное от visible, базовая линия отсчитывается от нижней границы самого блока. Поэтому и появляется отступ.

Не поленился) https://jsfiddle.net/efd9qqwj/

Строки по-умолчанию выравниваются по базовой линии. Соответственно, снизу образуется пространство под нижние выносные элементы символов. Задайте ссылкам vertical-align: top;

https://jsfiddle.net/kk44ya9L/ Там, где вы взяли эту задачу, надеюсь, указано, что у массивов есть стандартный метод some для этих целей)

Потому что координаты 0, 0. https://jsfiddle.net/cu962314/1/ Базовая линия влияет на выравнивание символов в строке, а не элемента относительно холста.

Можно, конечно, вручную в стилях задать свойства, но лучше скриптом https://jsfiddle.net/1xf58wv1/ P.S. учите js)

Готов откликнуться, только укажите хотя бы адрес почты, форум не совсем удобное место.

https://jsfiddle.net/mpz48dh1/

В эту функцию передаются опции, если они есть. Да и обработчики событий ведь нужно по готовности DOM навешивать. document.addEventListener("DOMContentLoaded", function() { Overlay.init(); }); Вообще, этот паттерн «модуль» называется. Или вы не об этом спрашивали?)

Поправил https://jsfiddle.net/0sdmLry7/1/ обновите скрипт, и к иконке display: block; добавьте Id нужен, чтобы связать кнопку и блок, который она должна открыть/закрыть

Исходил из того. что таких блоков может быть несколько, потому кода столько, сколько есть) Так задайте ей высоту 100% или 100vh Крестик https://jsfiddle.net/ymzp35a2/

Так? https://jsfiddle.net/0sdmLry7/ По второму пункту не очень понял)

Вот вам еще вариант, без цикла https://jsfiddle.net/n6t1pop2/

Попробуйте останавливать всплытие клика на блоке с формой $('.feedback-form').on('click', function(e) { e.stopPropagation(); });

https://jsfiddle.net/kk5zgesd/ https://jsfiddle.net/35kaubpp/

Если что-то пошло не так, читайте документацию. Метод appendChild вставляет элемент в конец. И возвращает вставленный элемент. Поэтому selectedIndex вы задаете не у селекта, а создаете у опции. https://jsfiddle.net/gmnts8Lo/1/