Multiple content: attr () values

Question

I am trying to show 2 things in my elements; class name and own data-size variable created. Separated by a single space.

I could get this to work by doing the following:

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

But that doesn't seem like the right way to do it. I also tried to do this:

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

But that didn't work either.

Enter

HTML

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

CSS

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

Required conclusion

element 20

Demo here

Answer 1

To combine two or more string values ​​in CSS, separate them with a space :

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

Note that the spaces between the attr() functions and the quotation marks do not match the spaces inside the quotation marks. The latter is the actual string containing the whitespace character that will separate the two attribute values ​​in the output. A space between the three parts is the operator that combines them together.