CSS :内容前两种颜色

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

Answer 2

你不能在CSS中以伪不同的方式设置:before部分内容的样式。你需要一个额外的元素(比如span)。:first-letter和:first-line (以及整个:before的内容)是例外，但这不是您想要实现的目标。