Привет. Подскажите пожалуйста, почему для центровки полоски при наведении на ссылку обязательно указывать два свойства: right: 50% и translateX(50%)? Если указать только одно свойство, то эта полоска получается либо слишком далеко от центра, либо слишком близко.
Добрый день.
Дело в том, что свойство right: 50% центрует псевдоэлемент относительно родительского элемента, двигая его таким образом, что в самом центре окажется правый край. Поэтому полоска уезжает дальше, чем нужно. А translateX(50%) возвращает нашу полоску назад на 50% своей длины и центрует её, относительно новой позиции.
1 лайк
Спасибо большое!