CSS :before content two colors

Question

我有一个要显示的结构化语义数据，并使用 CSS 对其进行样式设置。这是一个示例:

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

我希望它被渲染成这样:

...
User John ...
...

如果我希望“User”和“John”具有相同的颜色，我可以使用以下 CSS:

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

但是，我希望“User”为蓝色，“John”为红色。我如何使用 CSS 实现这一目标？

附言我不想转换我的数据表示。我知道我可以通过将数据转换为具有额外的 div 等轻松地获得这种格式，但我想直接以原样显示我的纯语义数据。

Answer 1

如果 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 获取单词之间的空格；可能有更简洁的方法来解决这些问题东西)