Теперь, когда плейсхолдер готов, сделаем декоративное выделение сфокусированного поля ввода с помощью псевдоэлементов у .label-box.

Это выделение будет выглядеть, как дополнительная нижняя рамка у поля ввода. Рамка будет появляться из центра поля, когда в нём появляется курсор, и исчезать при потере полем фокуса.

Создадим декоративную рамку из двух кусочков. Используем .label-box::before и .label-box::after для каждой части.