Usage: before CSS pseudo-language to add image to modal

Question

I have a Modal CSS class that is absolutely positioned, z-indexed above it by the parent, and perfectly positioned using jQuery. I want to add a carriage image (^) to the top of the modal window and have looked at using the :before CSS pseudo-selector to make this clean.

The image should be absolutely positioned and z-indexed over the modal, but I did not find a way to add the appropriate class to the image in the content attribute:

 .Modal:before{ content:url('blackCarrot.png') /* with class ModalCarrot ??*/ } .ModalCarrot{ position:absolute; left:50%; margin-left:-8px; top:-16px; } 

Second best option - can I add inline styles to the content attribute?

Answer 1

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

:after and :before can be used with content , since they are supported in every main browser except Internet Explorer, at least in 5 versions. Internet Explorer has full support in version 9+ and partial support in version 8.

Is this what you are looking for?

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

If not, can you explain a little better?

or you can use jQuery as Joshua said:

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

Answer 2

You must use a background attribute to give an image to this element, and I will use :: after instead of earlier, so it should already be drawn on top of your element.

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

Answer 3

1.This is my answer for your problem.

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

Answer 4

The content is still very unreliable in different browsers. I would suggest sticking with jQuery to accomplish this. I'm not sure what you are doing to figure out whether to add this carrot or not, but you should get a general idea:

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