Mam uporządkowane dane semantyczne, które chciałbym wyświetlić, stylizując je za pomocą CSS. Oto przykład:

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

Chciałbym, aby zostało to zrealizowane w następujący sposób:

...
User John ...
...

Jeśli chciałbym, aby „Użytkownik” i „Jan” miały ten sam kolor, mógłbym użyć następującego CSS:

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

Chcę jednak, aby „Użytkownik” był niebieski, a „John” czerwony. Jak mogę to osiągnąć za pomocą CSS?

P.S. Nie chcę przekształcać mojej reprezentacji danych. Wiem, że mogę łatwo uzyskać takie formatowanie, przekształcając dane tak, aby miały dodatkowe divy, itp., Ale chciałbym wyświetlić moje czyste dane semantyczne bezpośrednio w postaci, w jakiej jest.