伪 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;，你可以在::before伪元素上使用position:fixed;：https://jsfiddle.net/ug88rptL/2/

cmets 后的确定答案：

• 如果你需要position:absolute;而不能使用position:fixed;，只需从.box div中删除position:relative;并使用不同的边距来保持原来的定位。只要您不为伪元素设置left 或right 值，就可以工作：https://jsfiddle.net/ug88rptL/10/

Answer 2

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

阅读更多here。

.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;
}

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