Utilizzo degli attributi dei dati in css prima / dopo per un’immagine di sfondo

Quindi ho markup HTML che assomiglia a questo:

Some link 

Quindi voglio usare quell’icona dei data-icon nel mio CSS per visualizzare l’immagine di sfondo 64 di base. Qualcosa di simile a:

 a:before { content: ""; width: 16px; height: 16px; padding-left: 16px; background: url(attr(data-icon)); // this doesn't work } 

C’è un modo per fare questo?

Questo è ansible!

(ma non come potresti pensare)

 a{ background-image:url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRrlZZQ3MwNcconkIeLX3_nS_IV81gJ8rincQsipqXGsiBkPmCX); background-repeat:no-repeat; background-position:1000px 1000px; } a:before { content: ''; width: 16px; height: 16px; padding-left: 16px; background-image: inherit; background-position:0px 0px; } 

Sfortunatamente ciò che stai tentando di fare non funzionerà, attr è applicabile solo alla proprietà del content .

L’unica alternativa ansible sarebbe quella di dare al genitore un’immagine di sfondo, quindi impostare l’ background-image sullo pseudo elemento da inherit . Se impostate gli elementi genitore background-position fuori dei suoi contorni, quindi gli elementi di psuedo a zero, otterranno lo stesso effetto di nessuna immagine sul genitore, ma un’immagine sullo psuedo.

Provare:

 content: attr(data-icon); 

Codepen

JsFiddle

Questo funzionerà solo per gli attributi dei data basati sul testo e non per le immagini.

È ansible applicare uno sfondo normale, ma solo il content consente attr .