Beh, un pseudo elemento è un elemento che non esiste nell'albero del documento, ma è generato dal foglio di stile. Nelle attuali specifiche CSS esistono solo gli pseudo elementi before e after, che identificano rispettivamente il pseudo-elemento prima e dopo il contenuto dell'elemento in questione.
Per schiarirti le idee, ecco un esempio:
Codice:
:link::after, :link::after{
content: " ("attr(href)")";
}
Questa regola CSS farà seguire ad ogni collegamento ipertesutale, visitato (:visited) o non (:link), il corrispettivo indirizzo di destinazione indicato tra parentesi.
Ora, siccome il pseudo-elemento è come se fosse un figlio dell'elemento che scrivi nel selettore, puoi sfruttare questa caratteristica e posizionarlo in modo assoluto. Affinché però questo posizionamento assoluto non sia relativo al canvas, ma al contenitore dell'immagine, dovrai usare su quest'ultimo il posizionamento relativo. Il problema è che i tuoi contenitori sono delle celle di una tabella e queste non possono assumere tale posizionamento. Dovresti cambiare quindi struttura della pagina, magari mettendo le immagini come una lista (di fatto è semanticamente una lista di immagini), attribuire ai contenitori che devono mostrare l'etichetta new una apposita classe e buttare giù un po di CSS come questo:
Codice:
.new{
position:relative;
}
.new::before/*questa sintassi è CSS3, per assicurarti il funzionamento su browser non recentissimi rimuovi uno dei due punti*/{
content: "";/*Se questa proprietà non è presente, il pseudo elemento non viene visualizzato affatto*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;/*Queste quattro proprietà fanno aggrappare lo pseudo elemento ai quattro lati dell'elemento .new*/
background-image: url() no-repeat bottom right;
}