I am trying to set the width of an element based on the value of a specific attribute. The value type can be pt, px, em or %.
I have trouble with the percent value.


xml:

<img class="symbol" src="sample.jpg" size="20">

css:

img
{
content: attr(src url);
display:inline-block;
}


.symbol[size]
{
width: attr(size, pt)
}

In the

 width: attr(size, pt) 

line, when I change the unit type pt to "%" it doesn't seem to set the width as percentage. I couldn't seem to understand what's going wrong here.

Edited 9 Mar 2020 by efra

You have to use attr(size, percent).

Fantastic! Thank you. Wow I was spending ages trying to solve it.