Блог

Это результат:

посмотрите, как ссылка находится над числами

Я попытался изменить z-индекс before элемента и продолжать увеличивать его, но строка остается над числами,

не могли бы вы помочь, пожалуйста? код строки

 #progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: black;
    position: absolute;
    left: -50%;
    top: 9px;
    z-index: 0; /*put it behind the numbers*/
}
  

это jfiddle

http://jsfiddle.net/FkSH5/

Это потому, что ваш ::before псевдоэлемент (кстати, вы должны использовать :: для псевдоэлементов и : для псевдоклассов) перекрывается ::after псевдоэлементом.

Решение состоит в том, чтобы установить ::before псевдоэлемент в относительном положении (если вы не используете относительное позиционирование, свойство z-index будет проигнорировано) с z-индексом выше, чем у ::after аналога, т.е.:

 #progressbar li::before {
    content: counter(step);
    counter-increment: step;
    width: 20px;
    line-height: 20px;
    display: block;
    font-size: 10px;
    color: #333;
    background: white;
    border-radius: 3px;
    margin: 0 auto 5px auto;
    position: relative;
    z-index: 2;
}
  

Смотрите Измененную скрипку здесь: http://jsfiddle.net/teddyrised/FkSH5/1 /