137

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

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

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

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

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

4

4 に答える 4

199

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

::afterおよび::beforewithcontentは、少なくとも5バージョン前のInternetExplorer以外のすべての主要なブラウザでサポートされているため使用することをお勧めします。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;
}

そうでない場合は、もう少し詳しく説明できますか？

または、Joshuaが言ったようにjQueryを使用することもできます。

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

于 2011-07-25T09:51:34.240 に答える
46

その要素に画像を与えるには、background属性を使用する必要があります。前ではなく、:: afterを使用します。これにより、要素の上に既に描画されているはずです。

.Modal:before{
  content: '';
  background:url('blackCarrot.png');
  width: /* width of the image */;
  height: /* height of the image */;
  display: block;
}
于 2011-07-12T17:46:00.383 に答える
17

1.これがあなたの問題に対する私の答えです。

.ModalCarrot::before {
content:'';
background: url('blackCarrot.png'); /*url of image*/
height: 16px; /*height of image*/
width: 33px;  /*width of image*/
position: absolute;
}
于 2014-07-22T17:16:49.300 に答える
-4

コンテンツとそれ以前は、どちらもブラウザ間で非常に信頼性が低くなっています。これを実現するには、jQueryを使い続けることをお勧めします。このニンジンを追加する必要があるかどうかを判断するためにあなたが何をしているのかわかりませんが、全体的なアイデアを得る必要があります：

$(".Modal").before("<img src='blackCarrot.png' class='ModalCarrot' />");
于 2011-07-12T17:48:39.127 に答える