Значок CSS3: вставленный контент не размещен последовательно

Question

Я создаю значки, используя только CSS3. Пока все хорошо, но я столкнулся с проблемой с самой простой. Я просто хочу иметь «!» с центром в круге, но его положение несовместимо. Иногда это пиксель выше, пиксель слева или оба. Я понятия не имею, что вызывает это.

Here's a fiddle.

.nos { 
    position: relative; 
    height: 12px; width: 12px; 
    border: 2px solid #e04006; 
    border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; 
    display: block; 
    color: #e04006; 
    overflow: hidden; 
    cursor: default; 
} 

.nos:hover { 
    overflow: visible; 
} 

.nos span { 
    position: absolute; 
    padding-left: 18px; 
    display: block; 
    font-size: 14px; line-height: 16px; text-decoration: underline; 
    white-space: nowrap; 
} 

.nos:before { 
    content: '\21'; 
    position: absolute; top: 0; bottom: 0; left: 0; right: 0; 
    margin: 0; 
    height: 16px; width: 16px; 
    display: block; 
    font-family: "Lucida Console", Monaco, monospace; text-align: center; font-size: 12px; line-height: 12px; font-weight: bold; 
} 

Answer 1

height: 16px; width: 16px; Удалите из .nos:before

Update Fiddle

Answer 2

Похоже, мне удалось это исправить после того, как какой-то мастерить. Не знаете, что это за трюк.

.nos { 
    position: relative; 
    width: 12px; height: 12px; 
    border: 2px solid #e04006; 
    -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; 
    display: inline-block; 
    color: #e04006; 
    overflow: hidden; 
    cursor: default; 
} 

.nos:hover { 
    overflow: visible; 
} 

.nos span { 
    position: absolute; top: -2px; left: -2px; 
    height: 16px; 
    padding-left: 18px; 
    display: block; 
    text-decoration: underline; font-size: 14px; line-height: 16px; 
    white-space: nowrap; 
} 

.nos:before { 
    content: '\21'; 
    position: absolute; top: -2px; left: -2px; 
    width: 16px; 
    display: block; 
    font-family: Verdana, Geneva, sans-serif; text-align: center; font-weight: bold; font-size: 13px; line-height: 13px; 
} 

Fiddle