使用 :before 将图像放置在 div 之前

Question

div我试图在使用之前:before和之后放置图像:after。不幸的是，我看不到图像。为什么？

这是代码（在jsfiddle中）：

<div style="border:1px solid green; padding:50px;">
  <div id="videos-part">test</div>
</div>

#videos-part{

    height: 127px;
    width: 764px;
border:1px solid red;
    margin:30px;
    padding:30px;
}
#videos-part:before{
    width: 46px;
    height:46px;
    content: "before ";
    background-image: url(http://aux.iconpedia.net/uploads/136059938344542682.png);

}
#videos-part:after{
    width: 46px;
    height:46px;
    content: " after";
    background-image: url(http://aux.iconpedia.net/uploads/136059938344542682.png);

}

Answer 1

使用pseudo element您可以添加图像和自定义图标并创建自定义形状。先看一下DEMO。

#videos-part{
    height: 127px;
    width: 764px;
border:1px solid red;
    margin:30px;
    padding:30px;
}
#videos-part:before{
    width: 46px;
    height:46px;
    content: " ";
    position:absolute;
    top:30px;
    left:30px;
    background-image: url("http://lorempixel.com/50/50/");

}
#videos-part:after{
    width: 46px;
    height:46px;
    content: " ";
    position:absolute;
    top:30px;
    left:60px;
    background-image: url("http://placehold.it/100x50");

}