Лучшая техника для стиля значка

Question

Как бы вы написали встречный значок, например, facebook notification? значение не обязательно для одной цифры. Это может быть один или два. Также в моей попытке я не вижу, как я могу сосредоточить ценность.

#counter { 
 
    display: block; 
 
    width: 18px; 
 
    height: 18px; 
 
    padding: 2px; 
 
    position: absolute; 
 
    font-size: 12px; 
 
    left: 0; 
 
    top: 10px; 
 
    background: red; 
 
    border-radius: 3px; 
 
    text-align: center; 
 
    color: #fff; 
 
}

<span id="counter">12</span>

Попробуйте изменить значение на 1 цифру, он не раз посмотреть центр. Он немного выключен.

Answer 1

#counter { 
 
    display: block; 
 
    padding: 2px 4px; 
 
    position: absolute; 
 
    font-size: 12px; 
 
    left: 0; 
 
    top: 10px; 
 
    background: red; 
 
    border-radius: 3px; 
 
    text-align: center; 
 
    color: #fff; 
 
    line-height:18px; 
 
}

<span id="counter">111</span>

Answer 2

#counter { 
 
    display: block; 
 
    width: 18px; 
 
    height: 18px; 
 
    padding: 2px; 
 
    position: absolute; 
 
    font-size: 12px; 
 
    left: 0; 
 
    top: 10px; 
 
    background: red; 
 
    border-radius: 3px; 
 
    text-align: center; 
 
    color: #fff; 
 
    line-height:18px; 
 
}

<span id="counter">1</span>