CSS: prima del contenuto due colors

Ho dati semantici strutturati che vorrei mostrare, abbinandoli a CSS. Ecco un esempio:

......... 

Mi piacerebbe che fosse reso così:

 ... User John ... ... 

Se volevo che “Utente” e “Giovanni” avessero lo stesso colore, potrei usare il seguente CSS:

 user:before{ content: 'User ' attr(name); } 

Tuttavia, voglio che “Utente” sia blu e che “Giovanni” sia rosso. Come posso ottenere questo con i CSS?

PS Non voglio trasformare la mia rappresentazione dei dati. So che potrei ottenere facilmente tale formattazione trasformando i dati in div, ecc, ma vorrei mostrare i miei puri dati semantici direttamente nella forma che è.

Se l’elemento user è vuoto, puoi utilizzare il seguente CSS:

 user::before {content:"User "; color:blue;} user::after {content:attr(name); color:red;} 

Se l’elemento user contiene contenuto, puoi utilizzare:

 user::before {content:"User "; color:blue; float:left; margin-right:0.5em;} user::after {content:attr(name); color:red; float:left; margin-right:0.5em;} 

(usando float per ottenere il contenuto dell’elemento dietro la stringa “User John”, usando il margin per ottenere spazi bianchi tra le parole, ci sono probabilmente modi più ordinari per sistemare queste cose)

Non si può scrivere parte del contenuto di :before pseudo in modo diverso in CSS. Hai bisogno di un elemento extra (come una span ) da qualche parte. :first-letter e :first-line (e il contenuto di :before nel suo complesso) sono eccezioni a questo, ma non è quello che vuoi ottenere.