Question

我有一个结构化的语义数据，我想用CSS来设计它。这是一个示例：

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

我希望它像这样呈现：

...
User John ...
...

如果我想让'User'和'John'拥有相同的颜色，我可以使用以下CSS：

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

但是，我希望“用户”为蓝色，“约翰”为红色。我怎样才能用CSS实现这个目标？

P.S。我不想转换我的数据表示。我知道我可以通过转换数据以获得额外的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的内容）是例外，但这不是您想要实现的目标。

CSS：在内容两种颜色之前

2 个答案: