Css после текста, выходящего из коробки

Question

У меня есть проводная проблема, у меня есть обычный nav с ul и li, и я пытаюсь сделать после одного из красных ящиков с номером внутри, но проблема в том, что номер по какой-то причине выходит из коробки, в чем проблема?

Это код:

#mainHeader .rightNav { 
    float: right; 
    li { 
    position: relative; 
    } 
    img { 
    vertical-align: middle; 
    } 
    li:nth-child(4)::after { 
    content:attr(data-value); 
    color:#fff; 
    border-radius: 2px; 
    background-color: #d94a3e; 
    text-align: center; 
    width: 18px; 
    height: 18px; 
    position: absolute; 
    top:0; 
    right:0; 
    } 
} 

http://plnkr.co/edit/ys7Wy3EJPlA4VlXDt6hE?p=preview

Answer 1

Был неправильно на вашей высоте линии.

должны иметь: line-height: normal;

Добавьте к #mainHeader .rightNav li:nth-child(4)::after

Обновление вашего CSS к этому:

#mainHeader .rightNav li:nth-child(4)::after { 
     content: attr(data-value); 
     color: #fff; 
     border-radius: 2px; 
     background-color: #d94a3e; 
     text-align: center; 
     width: 18px; 
     height: 18px; 
     position: absolute; 
     top: 0; 
     right: 0; 
     line-height: normal; 
    } 

Sample link

Answer 2

Меняйте стили с этим :)

#mainHeader .rightNav li:nth-child(4)::after { 
     content: attr(data-value); 
     color: #fff; 
     border-radius: 2px; 
     background-color: #d94a3e; 
     text-align: center; 
     position: relative; 
     top: -10px; 
     right: 0; 
     padding: 1px 4px; 
}