Tengo una información semántica estructurada que me gustaría mostrar, diseñándola con CSS. Aquí hay una muestra:

...<user name="John">...</user>...

Me gustaría que se rindiera así:

...
User John ...
...

Si quisiera que "Usuario" y "John" tuvieran el mismo color, podría usar el siguiente CSS:

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

Sin embargo, quiero que 'Usuario' sea azul y 'John' que sea rojo. ¿Cómo puedo lograr esto con CSS?

PD No quiero transformar mi representación de datos. Sé que podría obtener fácilmente dicho formato transformando los datos para tener divs adicionales, etc., pero me gustaría mostrar mis datos semánticos puros directamente en la forma en que están.