CSS: перед содержимым два цвета

У меня есть структурированные семантические данные, которые я хотел бы отобразить, стилизовав их с помощью CSS. Вот образец:

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

Я бы хотел, чтобы это выглядело так:

...
User John ...
...

Если бы я хотел, чтобы «Пользователь» и «Джон» имели одинаковый цвет, я мог бы использовать следующий CSS:

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

Однако я хочу, чтобы «Пользователь» был синим, а «Джон» - красным. Как я могу добиться этого с помощью CSS?

P.S. Я не хочу преобразовывать представление данных. Я знаю, что могу легко получить такое форматирование, преобразовав данные в дополнительные блоки div и т. Д., Но я хотел бы отображать свои чистые семантические данные непосредственно в том виде, в котором они есть.


xml html css semantic-markup
person user    schedule 12.01.2013    source источник
comment
Вы пытаетесь стилизовать XML-документ?   -  person Kevin Boucher    schedule 12.01.2013
comment
содержание: '‹name› Пользователь ‹/name›' attr (имя); имя {цвет: разные;}   -  person Evgeny    schedule 12.01.2013
comment
не уверен, что это сработает, но я бы попробовал   -  person Evgeny    schedule 12.01.2013
comment
Не может быть HTML в content: (точнее, он не будет отображаться как HTML).   -  person joequincy    schedule 12.01.2013
comment
@KevinBoucher: Я специально не сказал, XML это или HTML, потому что вопрос о CSS применим к обоим.   -  person user    schedule 12.01.2013
comment
Ему потребовалось бы несколько секунд, чтобы проверить его идею в jsfiddle / codepen / dabblet.   -  person FelipeAls    schedule 12.01.2013
comment
@user: Есть много дискуссий о мета-ответах в комментариях; см. meta.stackexchange. ru / questions / 4217 /, которые кажутся здесь наиболее актуальными.   -  person BoltClock    schedule 12.01.2013

Ответы (2)


arrow_upward
4
arrow_downward

Если элемент 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 для получения содержимого элемента за строкой «Пользователь Джон»; использование margin для получения пробелов между словами; возможно, есть более аккуратные способы исправить эти вещи)

person unor    schedule 12.01.2013

arrow_upward
2
arrow_downward

Вы не можете стилизовать часть содержимого псевдонима :before по-другому в CSS. Вам где-то нужен дополнительный элемент (например, span). :first-letter и :first-line (и содержимое :before в целом) являются исключениями, но это не то, чего вы хотите достичь.

person FelipeAls    schedule 12.01.2013