CSS：前内容两种颜色 [英] CSS :before content two colors

问题描述

我有一个结构化的语义数据，我想显示，CSS样式。下面是一个示例：

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

我想要这样渲染：

  ... 
用户John ... 
 ... 
  

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

  user：before {
 content：'User'attr（name）;但是，我想让User为蓝色，John为New。是红色。我如何用CSS实现这个？
 
 
 
我不想变换我的数据表示。我知道我可以很容易地获得这样的格式化通过转换数据具有额外的div等，但我想直接显示我的纯语义数据的形式。
解决方案
如果 user 元素为空，您可以使用以下CSS：
  user :: before {content：User; color：blue;} 
 user :: after {content：attr（name）; color：red;} 
  
 
 
如果 user 元素包含内容，您可以使用：
  user :: before {content：User;颜色：蓝色; float：left; margin-right：0.5em;} 
 user :: after {content：attr（name）;颜色：红色float：left; margin-right：0.5em;} 
  
（使用 float 获取User John字符串后面的元素内容;使用 margin 在字之间获取空格;可能有更简单的方法来修复这些内容） p> 
I have a structured semantic data that I would like to display, styling it with CSS. Here is a sample:
...<user name="John">...</user>...
I would like it to be rendered like this:
...
User John ...
...
If I wanted 'User' and 'John' to have the same color, I could use the following CSS:
user:before{
  content: 'User ' attr(name);
}
However, I want 'User' to be blue, and 'John' to be red. How can I achieve this with CSS?

P.S. I don't want to transform my data representation. I know I could easily get such formatting by transforming the data to have extra divs, etc, but I would like to display my pure semantic data directly in the form it is.
解决方案
If the user element is empty, you could use the following CSS:
user::before {content:"User "; color:blue;}
user::after {content:attr(name); color:red;}
If the user element contains content, you may use:
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;}
(using float to get the element content behind the "User John" string; using margin to get whitespace between the words; there are probably neater ways to fix those things) 

                        
这篇关于CSS：前内容两种颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！