Sử dụng: trước phần tử giả CSS để thêm hình ảnh vào phương thức

Tôi có một lớp CSS Modalđược định vị tuyệt đối, được lập chỉ mục z phía trên lớp cha của nó và được định vị độc đáo với JQuery. Tôi muốn thêm hình dấu mũ (^) vào đầu hộp phương thức và đang xem xét việc sử dụng :beforebộ chọn giả CSS để thực hiện việc này một cách rõ ràng.

Hình ảnh cần được định vị tuyệt đối và được lập chỉ mục z phía trên phương thức, nhưng tôi không tìm thấy bất kỳ cách nào để thêm lớp thích hợp vào hình ảnh trong contentthuộc tính:

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

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

Tùy chọn tốt nhất thứ hai- tôi có thể thêm nội tuyến kiểu trong thuộc tính nội dung không?

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

:aftervà :beforecó contentthể sử dụng vì chúng được hỗ trợ trong mọi trình duyệt chính ngoài Internet Explorer ít nhất 5 phiên bản trở lại. Internet Explorer hỗ trợ hoàn toàn trong phiên bản 9+ và hỗ trợ một phần trong phiên bản 8.

Đây có phải là những gì bạn đang tìm kiếm?

.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;
}

Nếu không, bạn có thể giải thích rõ hơn một chút?

hoặc bạn có thể sử dụng jQuery, như Joshua đã nói:

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

Bạn nên sử dụng thuộc tính background để cung cấp hình ảnh cho phần tử đó và tôi sẽ sử dụng :: after thay vì trước đó, theo cách này, nó sẽ được vẽ trên đầu phần tử của bạn.

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

1. đây là câu trả lời của tôi cho vấn đề của bạn.

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

Nội dung và trước đó đều không đáng tin cậy trên các trình duyệt. Tôi khuyên bạn nên gắn bó với jQuery để thực hiện điều này. Tôi không chắc bạn đang làm gì để tìm ra liệu cà rốt này có cần được bổ sung hay không, nhưng bạn nên có ý tưởng tổng thể:

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