我有一个想要显示的结构化语义数据，并使用 CSS 对其进行样式化。这是一个示例：
...<user name="John">...</user>...
我希望它被渲染成这样：
...
User John ...
...
如果我希望“User”和“John”具有相同的颜色，我可以使用以下 CSS：
user:before{
content: 'User ' attr(name);
}
但是，我希望“用户”为蓝色，“约翰”为红色。我怎样才能用 CSS 实现这一点？
PS我不想改变我的数据表示。我知道我可以通过将数据转换为具有额外的 div 等轻松获得此类格式，但我想直接以其形式显示我的纯语义数据。