css - :after pseudo class doesn't insert background image

Question

当我使用 :after pseudo class with background image 时，它没有显示在我的 div 中。为什么会这样？

附言当我应用 position:absolute top:0, right:0 时，我可以看到图像。

<div class="vienas">abra kadabra</div>

.vienas {
height:200px;
border: 1px solid black;
position: relative;
}

div::after {
content:" ";
background: url(http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg);
width:100px;
height: 100px;
}

Answer 1

默认情况下，伪元素设置为显示内联。因此，您的 width 和 height 属性不会对元素产生任何影响，而是默认为内部内容的宽度和高度。

您需要将其设置为display: block:

div::after {
  ...
  display: block;
}

JSFiddle demo .