：before CSS疑似要素を使用して画像をモーダルに追加する

私は、Modal絶対的に配置され、親の上にzインデックスが付けられ、JQueryで適切に配置されたCSSクラスを持っています。モーダルボックスの上部にキャレット画像（^）を追加したいのですが、:beforeCSS疑似セレクターを使用してこれをきれいに行うことを検討していました。

画像は絶対的にモーダルの上に配置し、Zインデックスを付ける必要がありますが、適切なクラスを画像のcontent属性に追加する方法が見つかりませんでした。

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

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

次善のオプション-スタイルをインラインでcontent属性に追加できますか？

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

:afterそして、:beforeではcontent、彼らは少なくとも5つのバージョンのバックInternet Explorer以外のすべての主要なブラウザでサポートされているように使用しても大丈夫です。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' />");