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

Question

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

Fiddle

我在这里尝试了一大堆不同的解决方案，但我无法解决这个问题。

有什么建议吗？

代码：

.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; div移除.box并使用不同的边距来维持原始定位。只要您没有为伪元素设置left或right值，就可以正常工作：https://jsfiddle.net/ug88rptL/10/

Answer 2

:: before伪元素被视为您附加元素的子元素，因此它始终位于框内。你最好不要将盒子包装在另一个元素中然后给那个元素 :: before child

了解更多here。

＆＃13;

＆＃13;

.box {
  display: block;
  background: #FFF;
  width: 350px;
  height: 140px;
  box-shadow: 0 1px 3px #888;
  padding: 20px;
  overflow: auto;
  text-align: center;
  border-radius: 5px;
  border: 1px solid #FFF;
  position: relative;
  top: 130px;
  left: 30px;
}
.wrapper {
  position: relative;
}
.wrapper::before {
  position: absolute;
  font-family: FontAwesome;
  content: "\f0d8";
  color: red;
  font-size: 80px;
  left: 50px;
  top: 0;
}

＆＃13;

<div class="wrapper">
  <div class="box">
    BLAH BLAH BLAH BLAH BLAH
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;