HTML CSS, :: после добавления не уважают переполнение: скрытые от родителя

Question

Следующий код не учитывает переполнение: скрытые границы, и это вызывает беспорядок с моим кодом, где у меня много последовательных строк.

Вы можете видеть (jsfiddle ниже), что он уважает его в отношении текста («Тест»), но не с тем, что определено в :: после элемента.

Как я могу решить эту проблему?

UPDATE: это имеет смысл, что путем удаления позиции: абсолютное в :: после элемента затем границы уважаются, а затем «значок» не видел больше

HTML

<div class="wrap"> 
    <div><a href="/" class="btn icon">Test</a></div> 
    <div><a href="/" class="btn icon">Test</a></div> 
    <div><a href="/" class="btn icon">Test</a></div> 
</div> 

CSS

body { padding: 50px 0; } 

.wrap { 
    background: grey; 
    height:18px; 
    overflow:hidden; 
} 

.btn { 
    border: 1px solid #999; 
    border-radius: 8px; 
} 

.icon {} 

.icon::after { 
    content:""; 
    position:absolute; 
    margin-left:6px; 
    margin-top:1px; 
    width:4px; 
    height:6px; 
    background:#fff; 
    border:1px solid #444; 
    opacity:0.8; 
} 

http://jsfiddle.net/jsedv6kw/1/

Answer 1

Попробуйте это:

.icon {position: relative;} 

http://jsfiddle.net/jsedv6kw/2/

Answer 2

после ... должно быть Dispaly: блок

.icon::after { 
    **dispaly:block** 
    content:""; 
    position:absolute; 
    margin-left:6px; 
    margin-top:1px; 
    width:4px; 
    height:6px; 
    background:#fff; 
    border:1px solid #444; 
    opacity:0.8; 
} 

Answer 3

Дайте position:relative; в .wrap, а имущественное положение создает слои элементов.

Answer 4

.wrap { 
    background: grey; 
    height:18px; 
    overflow:hidden; 
    position:relative; 
} 

Вы не хватает положение: относительная; http://jsfiddle.net/jsedv6kw/3/