Saya mencoba menggunakan :beforepemilih untuk menempatkan gambar di atas gambar lain, tetapi saya menemukan bahwa itu tidak berfungsi untuk menempatkan gambar di depan imgelemen, hanya beberapa elemen lainnya. Secara khusus, gaya saya adalah:

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

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

dan saya menemukan bahwa ini berfungsi dengan baik:

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

tetapi ini tidak:

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

Saya bisa menggunakan elemen divatau pbukan itu span, dan browser dengan benar overlay gambar saya di atas gambar di imgelemen, tetapi jika saya menerapkan kelas overlay ke imgitu sendiri, itu tidak berfungsi.

Saya ingin ini berfungsi karena tambahan itu spanmenyinggung perasaan saya, tetapi yang lebih penting, saya punya sekitar 100 posting blog yang ingin saya modifikasi, dan saya bisa melakukan ini dalam sekali jalan jika saya bisa memodifikasi stylesheet, tetapi jika saya harus kembali dan menambahkan spanelemen tambahan di antara elemen adan img, ini akan menjadi lebih banyak pekerjaan.

Sayangnya, sebagian besar browser tidak mendukung penggunaan :afteratau :beforepada tag img.

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

Namun, itu mungkin bagi Anda untuk mencapai apa yang Anda butuhkan dengan JavaScript / jQuery. Lihat biola ini:

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

$(function() {

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

});

Edit :

Untuk alasan mengapa ini tidak didukung, periksa jawaban coreyward .

Penyeleksi pseudo sebelum dan sesudah tidak memasukkan elemen HTML - mereka menyisipkan teks sebelum atau setelah konten yang ada dari elemen yang ditargetkan. Karena elemen gambar tidak mengandung teks atau memiliki keturunan, tidak ada img:beforeatau img:aftertidak ada gunanya bagimu. Ini juga merupakan kasus untuk elemen seperti <br>dan <hr>untuk alasan yang sama.

Saya menemukan cara untuk membuat karya ini dalam css murni:

The Aku hanya konten palsu -metode

metode CSS murni untuk mengaktifkan img: after.

Anda dapat melihat CodePen: Saya hanya konten palsu atau melihat sumbernya .

Sumber & Cuplikan

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"  
/>

Dukungan browser

✓ Chrome 10+

✓ Firefox 11+

✓ Opera 9.8+

✓ Safari

Tidak ada dukungan

⊗ Internet Explorer 8/9

Silakan uji di browser lain

Karena sifat <img>menjadi elemen yang diganti , styling dokumen tidak memengaruhinya.

Untuk merujuknya, <picture>berikan pembungkus asli yang ideal yang dapat memiliki elemen pseudo yang melekat padanya, seperti:

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>

Berikut solusi lain menggunakan wadah div untuk img saat menggunakan :hover::afteruntuk mencapai efek.

HTML sebagai berikut:

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

CSS sebagai berikut:

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

Untuk melihatnya beraksi, lihat biola yang saya buat. Supaya Anda tahu ini ramah lintas browser dan tidak perlu mengelabui kode dengan 'konten palsu'.

Saya pikir cara terbaik untuk melihat mengapa ini tidak berhasil adalah: sebelum dan: setelah memasukkan konten mereka sebelum atau setelah konten dalam tag yang Anda gunakan untuk menerapkannya. Jadi ini berfungsi dengan divs atau span (atau kebanyakan tag lain) karena Anda dapat memasukkan konten di dalamnya.

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

Namun, img adalah tag penutup mandiri, dan karena tag tersebut tidak memiliki tag penutup terpisah, Anda tidak dapat memasukkan apa pun di dalamnya. (Itu perlu terlihat seperti <img>Content</img>, tetapi tentu saja itu tidak berhasil.)

Saya tahu ini adalah topik lama, tetapi muncul pertama kali di Google, jadi semoga ini akan membantu orang lain belajar.

Yang ini bekerja untuk saya:

html

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

CSS

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

Elemen pseudo yang dihasilkan oleh :: before dan :: after terkandung oleh kotak pemformatan elemen, dan karenanya tidak berlaku untuk elemen yang diganti seperti img, atau untuk elemen br.

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

::after dapat digunakan untuk menampilkan gambar mundur dari suatu gambar

Lihat contoh di bawah, 2 imgtag pertama menunjukkan url yang rusak. Tetapi yang kedua menampilkan gambar mundur bukan logo rusak standar dari browser. Namun, saya tidak yakin ini praktis, saya merasa agak sulit untuk membuatnya berfungsi dengan benar.

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">

Coba kode ini

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

Saya mencoba dan menemukan metode yang lebih sederhana untuk melakukannya. Ini HTML-nya:

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

Apa yang saya lakukan adalah menempatkan <p>tag kosong setelah tag gambar saya. Sekarang saya akan menggunakan p :: before untuk menampilkan gambar dan memposisikannya sesuai dengan kebutuhan saya. Inilah CSS-nya:

#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');
}

Cobalah.

Coba :: setelah pada elemen sebelumnya.