使用：before CSS伪元素将图像添加到模态

我有一个Modal绝对定位的CSS类，在其父对象上方经过z索引，并且与JQuery定位良好。我想在模式框的顶部添加一个插入符图像（^），并且正在考虑使用:beforeCSS伪选择器来做到这一点。

图像需要绝对定位并在模态上方进行z索引，但是我还没有找到将适当的类添加到content属性中的图像的任何方法：

.Modal:before{
  content:url('blackCarrot.png') /* with class ModalCarrot ??*/
}

.ModalCarrot{
   position:absolute;
   left:50%;
   margin-left:-8px;
   top:-16px;
}

第二好的选择-我可以在content属性中内联添加样式吗？

http://caniuse.com/#search=：之后

:after并:before用content都还好用，因为他们在Internet Explorer以外的所有主要的浏览器正在支持至少5个版本了。Internet Explorer在版本9+中具有完全支持，而在版本8中具有部分支持。

这是您要找的东西吗？

.Modal:after{
  content:url('blackCarrot.png'); /* with class ModalCarrot ??*/
  position:relative; /*or absolute*/
  z-index:100000; /*a number that's more than the modal box*/
  left:-50px;
  top:10px;
}

.ModalCarrot{
   position:absolute;
   left:50%;
   margin-left:-8px;
   top:-16px;
}

如果没有，您能解释得更好一点吗？

或者您可以使用jQuery，例如Joshua所说：

$(".Modal").before("<img src='blackCarrot.png' class='ModalCarrot' />");

您应该使用background属性为该元素提供图像，并且我将使用:: after而不是before，这样，它应该已经绘制在您元素的顶部。

.Modal:before{
  content: '';
  background:url('blackCarrot.png');
  width: /* width of the image */;
  height: /* height of the image */;
  display: block;
}

1.这是我为您解决的问题。

.ModalCarrot::before {
content:'';
background: url('blackCarrot.png'); /*url of image*/
height: 16px; /*height of image*/
width: 33px;  /*width of image*/
position: absolute;
}

内容以及之前的内容在浏览器之间都是高度不可靠的。我建议坚持使用jQuery完成此任务。我不确定您要做什么才能确定是否需要添加此胡萝卜，但是您应该了解一下总体思路：

$(".Modal").before("<img src='blackCarrot.png' class='ModalCarrot' />");