Sto cercando di utilizzare il :beforeselettore per posizionare un'immagine su un'altra immagine, ma sto scoprendo che semplicemente non funziona posizionare un'immagine prima di un imgelemento, solo qualche altro elemento. Nello specifico, i miei stili sono:

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

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

e trovo che funzioni bene:

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

ma questo non:

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

Posso usare un elemento divo pinvece di quello span, e il browser sovrappone correttamente la mia immagine sull'immagine imgnell'elemento, ma se applico la classe di sovrapposizione a imgse stessa, non funziona.

Mi piacerebbe farlo funzionare perché questo spanmi offende, ma soprattutto, ho circa 100 post sul blog che vorrei modificare, e posso farlo in una volta sola se potessi semplicemente modificare il foglio di stile, ma se devo tornare indietro e aggiungere un spanelemento in più tra gli elementi ae img, questo sarà molto più lavoro.

Sfortunatamente, la maggior parte dei browser non supporta l'utilizzo :aftero :beforesui tag img.

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

Tuttavia, è possibile per te realizzare ciò di cui hai bisogno con JavaScript / jQuery. Dai un'occhiata a questo violino:

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

$(function() {

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

});

Modifica :

Per il motivo per cui questo non è supportato, controlla la risposta di coreyward .

Gli pseudo-selettori prima e dopo non inseriscono elementi HTML, ma inseriscono testo prima o dopo il contenuto esistente dell'elemento target. Poiché gli elementi di immagine non contengono testo o avere discendenti, né img:beforeo img:afterfarà nulla di buono. Questo vale anche per elementi simili <br>e <hr>per lo stesso motivo.

Ho trovato un modo per far funzionare questo in puro CSS:

Il Sono solo falso contenuti -Metodo

un metodo CSS puro per abilitare img: after.

Puoi dare un'occhiata a CodePen: sono solo un contenuto falso o vedere la fonte .

Sorgente e frammento

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

Supporto per il browser

✓ Chrome 10+

✓ Firefox 11+

✓ Opera 9.8+

✓ Safari

Senza supporto

⊗ Internet Explorer 8/9

Si prega di testare in altri browser

A causa della natura di <img>essere un elemento sostituito , lo stile del documento non lo influenza.

Per fare riferimento comunque, <picture>fornisce un wrapper nativo ideale a cui possono essere associati pseudo-elementi, in questo modo:

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>

Ecco un'altra soluzione che utilizza un contenitore div per img durante l'utilizzo :hover::afterper ottenere l'effetto.

L'HTML come segue:

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

Il CSS come segue:

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

Per vederlo in azione, dai un'occhiata al violino che ho creato. Solo per sapere che è compatibile con più browser e non è necessario ingannare il codice con "contenuti falsi".

Penso che il modo migliore per capire perché questo non funziona sia: prima e: dopo aver inserito il contenuto prima o dopo il contenuto all'interno del tag a cui lo stai applicando. Funziona quindi con div o span (o con la maggior parte degli altri tag) perché puoi inserire contenuti al loro interno.

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

Tuttavia, un img è un tag autonomo e autochiudente, e poiché non ha un tag di chiusura separato, non è possibile inserire nulla al suo interno. (Dovrebbe apparire <img>Content</img>, ma ovviamente non funziona.)

So che questo è un vecchio argomento, ma si apre prima su Google, quindi spero che questo possa aiutare gli altri a imparare.

Questo funziona per me:

html

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

CSS

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

Gli pseudo-elementi generati da :: before e :: after sono contenuti nella casella di formattazione dell'elemento e quindi non si applicano agli elementi sostituiti come img o agli elementi br.

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

::after può essere utilizzato per visualizzare l'immagine di fallback di un'immagine

Vedi l'esempio di seguito, i primi 2 imgtag indicano gli URL rotti. Ma il secondo visualizza l'immagine di fallback invece del logo rotto predefinito dal browser. Tuttavia, non sono sicuro che sia pratico, trovo che sia un po 'complicato farlo funzionare correttamente.

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

Prova questo codice

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

Ho provato e trovato un metodo più semplice per farlo. Ecco l'HTML:

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

Quello che ho fatto è stato posizionare un <p>tag vuoto dopo il mio tag immagine. Ora userò p :: prima per mostrare l'immagine e posizionarla in base alle mie esigenze. Ecco il 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');
}

Provalo.

Prova :: after sull'elemento precedente.