Использование: перед псевдоэлементом CSS для добавления изображения в модальное окно

У меня есть класс CSS, Modalкоторый абсолютно позиционирован, проиндексирован по z над его родителем и хорошо позиционирован с помощью JQuery. Я хочу добавить изображение курсора (^) в верхнюю часть модального окна и искал использование :beforeпсевдоселектора CSS, чтобы сделать это чисто.

Изображение должно быть абсолютно позиционировано и проиндексировано по оси z над модальным окном, но я не нашел способа добавить соответствующий класс к изображению в contentатрибуте:

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

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

Второй лучший вариант - могу ли я добавить встроенные стили в атрибут содержимого?

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

:afterи :beforewith 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, как сказал Джошуа:

$(".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' />");