css - 使用 :before CSS pseudo element to add image to modal

Question

我有一个 CSS 类 Modal，它是绝对定位的，z-indexed 在它的父级之上，并且用 JQuery 很好地定位。我想在模式框的顶部添加一个插入符号图像 (^)，并正在考虑使用 :before CSS 伪选择器来干净地完成此操作。

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

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

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

第二个最佳选择 - 我可以在内容属性中添加内联样式吗？

Answer 1

http://caniuse.com/#search=::after

::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' />");