Використання: перед псевдоелементом 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і :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, як сказав Джошуа:

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

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

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