CSS：前内容两种颜色

本文介绍了CSS：前内容两种颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有一个结构化的语义数据，我想显示，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)