HTML CSS, :: 添加后不尊重父级的 overflow:hidden

Question

以下代码不遵守 overflow:hidden 边界，这导致我的代码混乱，其中有许多连续行。

您可以看到（下面的 jsfiddle）它确实尊重文本 ("Test")，但不尊重 ::after 项目中定义的内容。

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

更新：删除 ::after 元素中的 position:absolute 是有道理的，然后边界得到尊重，但是 "icon" 就再也看不到了

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

之后...必须是 dispaly:block

.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 2

试试这个：

.icon {position: relative;}

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

Answer 3

将 position:relative; 赋予 .wrap，因为位置属性创建元素层。

Answer 4

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

你不见了 位置：相对； http://jsfiddle.net/jsedv6kw/3/

HTML CSS, :: 添加后不尊重父级的 overflow:hidden

HTML CSS, ::after additions do not respect the overflow:hidden of the parent

html

css

pseudo-element