HTML CSS,::添加后不考虑父级的溢出:隐藏

Question

以下代码不遵守溢出:隐藏边界，这导致我的代码困惑，其中有许多连续行。

您可以看到(下面的 jsfiddle)它确实尊重文本(“测试”)，但不尊重::after 元素中定义的内容。

我该如何解决/解决这个问题？

更新:通过移除 position:absolute 在::after 元素中然后边界得到尊重是有意义的，但是“图标”不再可见

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/