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)