Странная стилизация. Объясните пожалуйста зачем.

Всем привет. Прохожу курс, и тут столкнулся с такой штукой.

.breadcrumbs a::before {
position: absolute;
top: 8px;
left: 30px;
box-shadow: 0 0 2px #cccccc;
content: counter(flag);
counter-increment: flag;
line-height: 20px;
}
Псевдоэлемент это у нас счетчик у крошек.
Мы ему задаём top: 8px
А потом задаём line height: 20px.

Вопрос. Чем руководствоваться, когда так делаешь? Почему бы просто оставить элемент без значения top и line-height. Он будет точно так же ровно по середине.
Или почему не:
top: 12px;
line-height: 12px;
Эффект будет такой же. Как это делать-понимать грамотно?))

Большое спасибо за ответ. Может кстати подскажете, в каком разделе тренажеров можно это подучить и понять логику.