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: 
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.

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

```html
<example type="f">blah blah blah</example>
```
The content [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/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](https://developer.mozilla.org/en-US/docs/Web/CSS/content)
> 
> 
> 

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

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

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

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

```html
<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:

```css
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;
}
```

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

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