У псевдоэлемента с position: absolute, не указаны значения left, top, а это означает, что браузер использует свои значения по умолчанию. А они могут вполне разниться от браузера к браузеру.
Разное поведение может обсулавливаться следующем:
когда значение по умолчанию не стоит, браузер отправляет обычный элемент к левому краю элемента с position: relative, или к краю страницы, если таковых элементов нет. Crhome видит разницу между элементами и псевдоэлементами и отправляет псевдоэлемент к краю элемента-родителя, а не элемента с position: relative. @SelenIT2 уточнил:
Дело в том, что, по стандарту, что угодно с position:absolute и без top/right/left/bottom размещается там, где оно оказалось бы без position:absolute. А псевдоэлемент размещается перед контентом родительского элемента. А когда контент центрирован, возникает неоднозначность, где именно это «перед контентом» — до или после свободного места, добавленного для центрирования. По логике здравого смысла, полагаю, всё-таки ближе к тексту (т.е. Хром более прав).
Как оказалось, не важно: это псевдо элемент или просто элемент, IE ведет себя также.
Суть в центровке контента codepen.io/anon/pen/jPmEjK
Поэтому стоит всегда добавляеть пару атрибутов left/top (или других по оси x и оси y ), чтобы позиционирование было однозначным.
Бывает, что иногда в списках position: relative не удается поставить родителю, и приходится не использовать одно из значений left/top, оставляя поведение элемента на усмотрение браузера, но в таком случае лучше изменить html-код, чтобы можно было использовать у родительского элемента списка relative, а у дочернего - absolute
Простой
Средний
