Свойство содержимого CSS - установите attr в верхний регистр, используя CSS

Question

Примечание: я не могу вообще изменить XML - это изменение - если возможно - должно быть выполнено с использованием CSS. Также обратите внимание, что я немного начинаю, когда речь заходит о CSS.

Следующий фрагмент XML является примером того, что у меня есть:

<example type="f"> blah blah blah</example> 

И фрагмент CSS

example 
{ 
    content: "Example type " attr(type) ": "; 
} 

Это производит вывод, как ожидалось:

Пример типа F:

Можно ли установить attr в верхний регистр с помощью CSS? Как и следующее ... Может быть, с помощью рядного CSS ...

Примера типа F:

Я попробовал несколько вещей, например, ж/без успеха.

example.attr { 
    text-transform: uppercase; 
} 

Любая помощь будет оценена

Спасибо

Answer 1

Свойство content это применимо только к псевдо-элементов.

Так что ваш код должен быть:

example::before 
{ 
    content: "Example type " attr(type) ": "; 
} 

Это может быть установлен на text-transform:uppercase НО он будет применяться к струне весьcontent и не только атрибут.

example::before { 
 
    content: "Example type " attr(type)": "; 
 
    text-transform: uppercase; 
 
    color: red; 
 
}

<example type="f">blah blah blah</example>

Answer 2

Содержание content свойство должно быть использовано с псевдо элемента.

Процитируем MDN Docs:

Содержание CSS свойство используется с :: до и после того, как :: псевдо-элементы для генерации содержимого в элементе.
_source

example:before { 
 
    content: "Example type " attr(type)": "; 
 
}

<example type="f">blah blah blah</example>

Затем вы можете применить стили вы хотите, чтобы элемент pusedo:

example:before { 
 
    content: "Example type " attr(type)": "; 
 
    text-transform: uppercase; 
 
}

<example type="f">blah blah blah</example>

Если вы хотите только атр быть в верхнем регистре, то вы можете просто использовать after псевдо элемент и поместите его:

example { 
 
    position: relative; 
 
    display: block; 
 
} 
 
example:before { 
 
    content: "Example type "; 
 
    display: block; 
 
} 
 
example:after { 
 
    content: attr(type)": "; 
 
    text-transform: uppercase; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 93px; 
 
}

<example type="f">blah blah blah</example>

я не рекомендую это , но это может быть сделано.