Не совсем понятен один момент. Почему, когда при наведении срабатывает анимация подчеркивания, то before и after расширяются из середины? а не слева направо?
Поэкспериментировал, так понял, что из-за left и right при абсолютном позиционировании?
Но почему так? как это объясняется в теории?