:before別の画像の上に画像を配置するためにセレクターを使用しようとしていますが、img要素の前に画像を配置するだけでは機能せず、他のいくつかの要素しか見つかりません。具体的には、私のスタイルは次のとおりです。

.container
{
   position: relative;
   display: block;
}

.overlay:before
{
    content: url(images/[someimage].png);
    position: absolute;
    left:-20px;
    top: -20px;
}

そして、これはうまくいくことがわかります：

<a href="[url]" class="container">
  <span class="overlay"/>
  <img width="200" src="[url]"/>
</a>

しかし、これはしません：

<a href="[url]" class="container">
  <img width="200" src="[url]" class="overlay"/>
</a>

その代わりにdivまたはp要素を使用することができspan、ブラウザーは私の画像をimg要素内の画像の上に正しくオーバーレイしますが、オーバーレイクラスをimgそれ自体に適用すると機能しません。

余分にspan気分を害するので、これを機能させたいのですが、さらに重要なのは、変更したい約100のブログ投稿があり、スタイルシートを変更することができれば、これを一度に実行できることです。しかし、前に戻っspanてa、img要素と要素の間に余分な要素を追加する必要がある場合、これはより多くの作業になります。

残念ながら、ほとんどのブラウザでは使用してサポートしていない:afterか:beforeのimgタグに。

http://lildude.co.uk/after-css-property-for-img-tag

ただし、JavaScript / jQueryで必要なことを実行することは可能です。このフィドルをチェックしてください：

http://jsfiddle.net/xixonia/ahnGT/

$(function() {

    $('.target').after('<img src="..." />');

});

編集：

これがサポートされていない理由については、coreywardの回答をご覧ください。

beforeおよびafter疑似セレクターはHTML要素を挿入しません。ターゲット要素の既存のコンテンツの前後にテキストを挿入します。画像要素にはテキストや子孫が含まれていないため、どちらimg:beforeも効果img:afterがありません。これはまた、のような要素のためのケースです<br>と<hr>同じ理由。

私はこれを純粋なCSSで動作させる方法を見つけました：

私は偽のコンテンツだ -method

img：afterを有効にする純粋なCSSメソッド。

あなたはCodePenをチェックアウトすることができます：私は単なる偽のコンテンツです、またはソースを参照してください。

ソースとスニペット

img {
    /* hide the default image */
    height:0;
    width:0;

    /* hide fake content */
    font-size:0;
    color:transparent;

    /* enable absolute position for pseudo elements */
    position:relative;

    /* and this is just fake content */
    content:"I'm just fake content";
}

/* initial absolute position */
img:before,
img:after {
    position:absolute;
    top:0;
    left:0;    
}

/* img:before - chrome & others */
img:before {
    content:url(http://placekitten.com/g/250/250);
}

/* img:before - firefox */
body:not(:-moz-handler-blocked) img:before {
    padding:125px;
    background:url(http://placekitten.com/g/250/250) no-repeat;
}

/* img:after */
img:after {
    /* width of img:before */
    left:250px;

    content:url(http://lorempixel.com/350/200/city/1);
}

<img
    alt="You are watching the ~ I'm just fake content ~ method"  
/>

ブラウザのサポート

✓Chrome 10以降

✓Firefox 11以降

✓Opera 9.8以降

✓サファリ

サポートなし

⊗Internet Explorer 8/9

他のブラウザでテストしてください

置換<img>された要素であるという性質上、ドキュメントのスタイルは影響を受けません。

とにかくそれを参照するに<picture>は、次のように、それに付属する疑似要素を持つことができる理想的なネイティブラッパーを提供します。

img:after, picture:after{
    content:"\1F63B";
    font-size:larger;
    margin:-1em;
}

<img src="//placekitten.com/110/80">

<picture>
    <img src="//placekitten.com/110/80">
</picture>

:hover::after効果を達成するためにを使用しながらimgのdivコンテナーを使用する別のソリューションを次に示します。

次のようなHTML：

<div id=img_container><img src='' style='height:300px; width:300px;'></img></div>

次のようなCSS：

#img_container { 
    margin:0; 
    position:relative; 
} 

#img_container:hover::after { 
    content:''; 
    display:block; 
    position:absolute; 
    width:300px; 
    height:300px; 
    background:url(''); 
    z-index:1; 
    top:0;
} 

実際の動作を確認するには、私が作成したフィドルをチェックしてください。これがクロスブラウザー対応であり、「偽のコンテンツ」でコードをだます必要がないことを知っているだけです。

これが機能しない理由を確認する最良の方法は、：beforeおよび：afterを適用するタグ内のコンテンツの前または後にコンテンツを挿入することです。したがって、divまたはspan（または他のほとんどのタグ）で動作します。これは、それらの中にコンテンツを配置できるためです。

<div>
:before
Content
:after
</div>

ただし、imgは自己完結型の自己終了タグであり、独立した終了タグがないため、中に何も入れることはできません。（これはのようにする必要があります<img>Content</img>が、もちろん機能しません。）

これは古いトピックであることはわかっていますが、最初にGoogleに表示されるので、他の人が学ぶのに役立つことを願っています。

これは私のために働きます：

html

<ul>
    <li> name here </li>
</ul>

CSS

ul li::before {
    content: url(../images/check.png);
}

:: beforeおよび:: afterによって生成された疑似要素は、要素のフォーマットボックスに含まれているため、imgなどの置換された要素やbr要素には適用されません。

https://developer.mozilla.org/en-US/docs/Web/CSS/::after

::after 画像のフォールバック画像を表示するために使用できます

以下の例を参照してください。最初の2つのimgタグは壊れたURLを指しています。ただし、2つ目は、ブラウザからのデフォルトの壊れたロゴの代わりに代替画像を表示します。ただし、これが実用的かどうかはわかりませんが、正しく機能させるのは難しいと思います。

img {
  position: relative;
  display: inline-block;
  width: 300px;
  height: 200px;
  vertical-align: top;
}
img:not(:first-child)::after {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  content: "<" attr(alt) "> NOT FOUND";
  border: 1px dashed #999;
  background: url(https://cdn.dribbble.com/users/1012566/screenshots/4187820/topic-2.jpg) center/100%;
}

<img src="https://source.unsplash.com/random/100/75" alt="logo">
<img src="https://source.unsplash.com/random/100/75" alt="logo">
<img src="https://source.unsplash.com/random/100x75" alt="logo">

このコードを試してください

.button:after {
    content: ""
    position: absolute
    width: 70px
    background-image: url('../../images/frontapp/mid-icon.svg')
    display: inline-block
    background-size: contain
    background-repeat: no-repeat
    right: 0
    bottom: 0
}

私はそうするためのより簡単な方法を試してみました。HTMLは次のとおりです。

    <img id="message_icon" src="messages2.png">
    <p id="empty_para"></p>

私が行ったことは<p>、イメージタグの後に空のタグを配置することでした。次に、p :: beforeを使用して画像を表示し、必要に応じて配置します。CSSは次のとおりです。

#empty_para
{
    display:inline;
    font-size:40;
    background:orange;
    border:2px solid red;
    position:relative;
    top:-400px;
    left:100px;
}
#empty_para::before
{
    content: url('messages.png');
}

それを試してみてください。

前の要素で:: afterを試してください。