Multiple content: attr() values

Question

I'm trying to display 2 things in my elements; the class name and an own created data-size variable. Seperated with one white space.

I could get this working by doing this:

.element:before {
   content: attr(class);
}

.element:after {
   content: attr(data-size);
}

But it doesnt seem like a the right way to do it. I have also tried to do this:

.element:before {
   content: attr(class data-size);
}

But that didnt work aswell.

Input

HTML

<div class="element" data-size="20"></div>

CSS

.element:before {
    content: attr(class data-size);
}

Wanted output

element 20

Demo here

Answer 1

To concatenate two or more string values in CSS, separate them with whitespace:

.element:before {
    content: attr(class) ' ' attr(data-size);
}

Note that the whitespace between the attr() functions and the quotes is not the same as the whitespace within the quotes. The latter is an actual string containing a space character, which will separate the two attribute values in the output. The whitespace between the three parts is the operator that joins them together.