为什么当我将溢出属性设置为隐藏时，伪元素会消失？

Question

这里是我的代码：

.user_inbox{ 
 
    position:absolute; 
 
    background-color: #fff; 
 
    border-radius:2px; 
 
    -o-border-radius:2px; 
 
    -moz-border-radius:2px; 
 
    -webkit-border-radius:2px; 
 
    -ms-border-radius:2px; 
 
    box-shadow: 0px 0px 6px #ccc; 
 
    -o-box-shadow: 0px 0px 6px #ccc; 
 
    -moz-box-shadow: 0px 0px 6px #ccc; 
 
    -webkit-box-shadow: 0px 0px 6px #ccc; 
 
    -ms-box-shadow: 0px 0px 6px #ccc; 
 
    width: 310px; 
 
    direction:ltr; 
 
    left:53px; 
 
    top:63px; 
 
    border:1px solid #CCC; 
 
    z-index:5000; 
 
    height:100%; 
 
    max-height:55%; 
 
    min-height:180px; \t 
 
    right: 53px; 
 
    top: 65px; 
 
    /* overflow:hidden; */ 
 
} 
 
.user_inbox:after{ 
 
    background-color: #fff; 
 
    box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, .4); 
 
    -o-box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, .4); 
 
    -moz-box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, .4); 
 
    -webkit-box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, .4); 
 
    -ms-box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, .4); 
 
    content: "\00a0"; 
 
    display: block; 
 
    height: 12px; 
 
    width: 12px; 
 
    margin-left:18px; 
 
    position:absolute; 
 
    top:-5px; 
 
    transform:rotate(135deg); 
 
    -moz-transform:rotate(135deg); 
 
    -ms-transform:rotate(135deg); 
 
    -webkit-transform:rotate(135deg); 
 
    -o-transform:rotate(135deg); 
 
    background-color: #F7F7F7; 
 
    right: 18px; 
 
} 
 

 
.title{ 
 
    background-color: #F7F7F7; 
 
    display:block; 
 
    width; 100%; 
 
    height: 20px; 
 
    text-align: center; 
 
    padding: 5px; 
 
}

<div class="user_inbox"> 
 
    <span class="title">there is a title</span> 
 
</div>

现在，请删除评论这是围绕这条线：overflow:hidden;（我的意思是请该行取消注释） ..然后突然说上调箭头将消失。

好吧，我需要向上箭头和这个属性overflow:hidden;。我该如何处理？

Answer 1

overflow:hidden是游戏结束的子元素试图弹出它的父溢出边界。
相反创建一个内部容器，将溢出（隐藏）

.overflow{ 
 
    position: relative; 
 
    overflow:hidden; 
 
    height: inherit; 
 
    width: inherit; 
 
    background: #cf5; 
 
} 
 

 
.user_inbox{ 
 
    position:absolute; 
 
    background-color: #fff; 
 
    border-radius:2px; 
 
    box-shadow: 0px 0px 6px #ccc; 
 
    width: 310px; 
 
    direction:ltr; 
 
    left:53px; 
 
    top:63px; 
 
    border:1px solid #CCC; 
 
    z-index:5000; 
 
    height:100%; 
 
    max-height:55%; 
 
    min-height:180px; \t 
 
    right: 53px; 
 
    top: 65px; 
 
} 
 
.user_inbox:after{ 
 
    background-color: #fff; 
 
    box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, 0.4); 
 
    content: "\00a0"; 
 
    display: block; 
 
    height: 12px; 
 
    width: 12px; 
 
    margin-left:18px; 
 
    position:absolute; 
 
    top:-5px; 
 
    transform:rotate(135deg); 
 
    -moz-transform:rotate(135deg); 
 
    -ms-transform:rotate(135deg); 
 
    -webkit-transform:rotate(135deg); 
 
    -o-transform:rotate(135deg); 
 
    background-color: #F7F7F7; 
 
    right: 18px; 
 
} 
 

 
.title{ 
 
    background-color: #F7F7F7; 
 
    display:block; 
 
    width; 100%; 
 
    height: 20px; 
 
    text-align: center; 
 
    padding: 5px; 
 
}

<div class="user_inbox"> 
 
    <div class="overflow"> 
 
    <span class="title">there is a title</span> 
 
    </div> 
 
</div>

或 “底部”（在标题下方）;

.overflow{ 
 
    position: relative; 
 
    overflow:hidden; 
 
    width: inherit; 
 
    background: #cf5; 
 
    max-height:55%; 
 
    min-height:180px; \t 
 
} 
 

 
.user_inbox{ 
 
    position:absolute; 
 
    background-color: #fff; 
 
    border-radius:2px; 
 
    box-shadow: 0px 0px 6px #ccc; 
 
    width: 310px; 
 
    direction:ltr; 
 
    left:53px; 
 
    top:63px; 
 
    border:1px solid #CCC; 
 
    z-index:5000; 
 
    /*height:100%; 
 
    max-height:55%; 
 
    min-height:180px; \t */ 
 
    right: 53px; 
 
    top: 65px; 
 
} 
 
.user_inbox:after{ 
 
    background-color: #fff; 
 
    box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, 0.4); 
 
    content: "\00a0"; 
 
    display: block; 
 
    height: 12px; 
 
    width: 12px; 
 
    margin-left:18px; 
 
    position:absolute; 
 
    top:-5px; 
 
    transform:rotate(135deg); 
 
    -moz-transform:rotate(135deg); 
 
    -ms-transform:rotate(135deg); 
 
    -webkit-transform:rotate(135deg); 
 
    -o-transform:rotate(135deg); 
 
    background-color: #F7F7F7; 
 
    right: 18px; 
 
} 
 

 
.title{ 
 
    background-color: #F7F7F7; 
 
    display:block; 
 
    width; 100%; 
 
    height: 20px; 
 
    text-align: center; 
 
    padding: 5px; 
 
}

<div class="user_inbox"> 
 
    <span class="title">there is a title</span> 
 
    <div class="overflow"></div> 
 
</div>