CSS Content Property - Set attr to uppercase using CSS

Question

Note: I cannot alter the XML at all - this change - if possible - must be done using CSS. Also note that I am somewhat of a novice when it comes to CSS.

The following snippet of XML is an example of what I have:

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

And the snippet of CSS

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

This produces output as expected:

Example type f:

Is it possible to set the attr to uppercase using CSS? Like the following...Maybe using in-line CSS...

Example type F:

I have tried several things for example w/ no success.

example.attr {
  text-transform: uppercase;
}

Any help would be appreciated

Thank you

Answer 1

The content property is only applicable to pseudo-elements.

So your code should be:

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

This can be set to text-transform:uppercase BUT it will apply to the whole content string and not just the attribute.

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

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

Answer 2

The content content property should be used with a pseudo element.

To quote the MDN Docs:

The content CSS property is used with the ::before and ::after pseudo-elements to generate content in an element.
_source

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

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

Then you can apply the styles you want to the pusedo element:

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

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

If you want just the attr to be uppercase, then you can just use the after pseudo element and position it:

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>

I wouldn't necessarily recommend it, but it can be done.