У меня есть структурированные семантические данные, которые я хотел бы отобразить, стилизуя их с помощью CSS. Вот образец:

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

Я хотел бы, чтобы это отображалось так:

...
User John ...
...

Если бы я хотел, чтобы «Пользователь» и «Джон» имели один и тот же цвет, я мог бы использовать следующий CSS:

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

Однако я хочу, чтобы «Пользователь» был синим, а «Джон» - красным. Как я могу добиться этого с помощью CSS?

Постскриптум Я не хочу преобразовывать свое представление данных. Я знаю, что могу легко получить такое форматирование, преобразовав данные в дополнительные div и т. Д., Но я хотел бы отобразить мои чисто семантические данные непосредственно в том виде, в каком они есть.