HTML CSS，::添加後不尊重溢出：隱藏父項

Question

下面的代碼不尊重溢出：隱藏的邊界，這導致我的代碼亂七八糟，我有很多連續的行。

您可以看到（jsfiddle在下面）它確實尊重它與文本（「測試」）有關，但與:: after項目中定義的內容無關。

我該如何解決/解決方法呢？

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/