我有一个想要显示的结构化语义数据，并使用 CSS 对其进行样式设置。这是一个示例：
...<user name="John">...</user>...
我希望它像这样呈现：
...
User John ...
...
如果我希望“用户”和“约翰”具有相同的颜色，我可以使用以下 CSS：
user:before{
content: 'User ' attr(name);
}
但是，我希望“用户”为蓝色，而“约翰”为红色。如何使用 CSS 实现这一点？
PS我不想转换我的数据表示。我知道我可以通过将数据转换为具有额外的 div 等来轻松获得这种格式，但我想直接以它的形式显示我的纯语义数据。
如果user元素为空，则可以使用以下 CSS：
user::before {content:"User "; color:blue;}
user::after {content:attr(name); color:red;}
如果user元素包含内容，您可以使用：
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;}
（float用于获取“User John”字符串后面的元素内容；margin用于获取单词之间的空格；可能有更简洁的方法来解决这些问题）
您不能在 CSS 中以不同的方式设置部分:before伪内容的样式。您需要一个额外的元素（如 a span）某处。:first-letter和:first-line（以及:before整体的内容）是例外，但这不是您想要实现的目标。