Проблема заключается в том, что вы используете absoluteпозиционирование и метод, который вы используете для его центрирования. Если вы позиционируете элемент абсолютно, старый margin: 0 auto;метод не сработает для центрирования элемента . Я укажу вам объяснение, почему это в конце вопроса, но если вы просто хотите, чтобы это сработало, давайте сначала найдем решение.

Вот некоторый рабочий код. Посмотреть это на JSFiddle

#tool-menu li {
  ...
  position: relative;
}

li.current:after {
  ...
  position: absolute;
  width: 10px;
  top: 6;
  left: 50%;
  margin-left: -5px;
}

Давайте разберемся, что здесь происходит.

Установка нового Содержащего Блока

В вашей оригинальной скрипке псевдоэлемент расположен абсолютно относительно области просмотра. Примером может быть лучший способ показать, что это значит, и почему мы этого не хотим. Рассмотрите возможность установки его top: 0. Это будет держать его привязанным к верхней части окна браузера (или, в данном случае, к рамке JSFiddle), а не к родительскому элементу (the li). Таким образом, если наше меню окажется в нижней части страницы или даже будет перемещаться, псевдоэлемент будет плавать независимо от него и прилипнет к верхней части страницы.

Это поведение по умолчанию для абсолютно позиционированного элемента, когда вы явно не устанавливаете позицию для любых родительских элементов. Мы хотим, чтобы его позиция была определена относительно родителя. Если мы сделаем это, то псевдоэлемент останется с родителем, где бы он ни находился.

Чтобы это произошло, вам нужно установить родительский элемент, #tool-menu liчтобы он был явно позиционирован (что означает, что он должен быть установлен иначе position: static). Если вы решите использовать position: relative;, он не изменит вычисленное местоположение родителя на странице и сделает то, что мы хотим. Вот почему я использовал это.

С технической точки зрения, то, что мы делаем здесь, - это создание нового содержащего блока для ребенка.

Позиционирование псевдоэлемента

Теперь, когда наше абсолютное позиционирование будет определено по отношению к родителю, мы можем воспользоваться тем фактом, что мы можем использовать проценты, чтобы определить, куда поместить ребенка. В этом случае вы хотите, чтобы он был в центре, поэтому я установил его left: 50%.

Если вы сделаете именно это, вы увидите, что это выравнивает левый край псевдоэлемента на 50%. Это не то, что мы хотим - мы хотим, чтобы центр псевдоэлемента находился посередине. И именно поэтому я добавил негатив margin-left. Это немного смещает его, чтобы выровнять середину по центру родительского элемента.

И как только мы это сделаем, это будет в центре! Brilliance!

Почему не моя margin: auto;работа?

Автоматическое значение маржи рассчитывается по довольно сложному алгоритму. Иногда он равен 0. Я знаю из опыта, что это один из таких случаев, хотя я еще не проследил свой путь через алгоритм, чтобы точно понять, почему. Если вы хотите пройти через это, взгляните на спецификацию, которую большинство браузеров, скорее всего, реализовали.