Contenuti multipli: valori attr()

Question

Sto provando a visualizzare 2 elementi nei miei elementi; il nome class e una variabile creata da data-size. Separato con uno spazio bianco.

ho potuto ottenere questo lavoro facendo questo:

.element:before { 
    content: attr(class); 
} 

.element:after { 
    content: attr(data-size); 
} 

ma doesnt sembrare un modo giusto per farlo. Ho anche provato a fare questo:

.element:before { 
    content: attr(class data-size); 
} 

Ma che partecipavano non ha funzionato.

ingresso

HTML

<div class="element" data-size="20"></div> 

CSS

.element:before { 
    content: attr(class data-size); 
} 

uscita Ricercato

elemento 20

Demo here

Answer 1

concatenare due o più valori di stringa in CSS, separate them with whitespace:

.element:before { 
    content: attr(class) ' ' attr(data-size); 
} 

Si noti che gli spazi tra le attr() funzioni e le virgolette non è la stessa come il spazio vuoto entro le virgolette. Quest'ultima è una stringa reale contenente un carattere di spazio, che separerà i due valori di attributo nell'output. Lo spazio bianco tra le tre parti è l'operatore che le unisce insieme.