伪CSS元素不显示在父div之外

Question

我有一个伪元素拒绝显示在它的父div之外.我把它设置了一半,一半,所以你可以在下面的小提琴上看到问题.

小提琴

我在这里尝试了一大堆不同的解决方案,但是我无法让它发挥作用.

有什么建议？

代码:

.box {
display:block;
position: relative;
z-index: 10;
background: #FFF;
width: 350px;
height:140px;
box-shadow: 0 1px 3px #888;
padding:20px;
overflow: auto;
top: 30px;
left:50px;
text-align:center;
border-radius: 5px;
border: 1px solid #FFF;
}

.box::before {
position:absolute;
font-family:FontAwesome;
content:"\f0d8";
color:red;
z-index: 20;
font-size:80px;
left:50px;
top:-45px;
}

Answer 1

• 假设您不需要,overflow:auto;这是一个有效的解决方案:https://jsfiddle.net/ug88rptL/1/.我刚删除了那个属性.

• 如果你需要overflow:auto;,你可以使用position:fixed;上的::before伪元素:https://jsfiddle.net/ug88rptL/2/

评论后的确定答案:

• 如果你需要position:absolute;并且势在必行不能使用position:fixed;,只需position:relative;从.boxdiv中删除并使用不同的边距来保持原始定位.只要您没有为伪元素设置left或right值,就可以工作:https://jsfiddle.net/ug88rptL/10/