Использование: перед псевдоязыком 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;
}

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

Ответы

Ответ 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 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' />");

Ответ 2

Вы должны использовать фоновый атрибут, чтобы дать изображение этому элементу, и я буду использовать:: after вместо ранее, таким образом, он должен быть уже нарисован поверх вашего элемента.

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

Ответ 3

1.Это мой ответ для вашей проблемы.

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

Ответ 4

Содержимое и до этого очень ненадежны в разных браузерах. Я бы предложил придерживаться jQuery, чтобы выполнить это. Я не уверен, что вы делаете, чтобы выяснить, нужно ли добавить эту морковь или нет, но вы должны получить общую идею:

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