Adding space between two attributes in a pseudo element content

Question

I have the following html

<div data-price="10" data-currency="USD"></div>

and I want to create a pseudo element that displays data in the attributes like this:

:before {
 content: attr(data-price) + ' ' + attr(data-currency)
}

My problem is that the space is not added between. Is there so special way to achieve it without harding the space in front in the attribute itself? Thank you.

Answer 1

use content: attr(data-price) " " attr(data-currency); dont use + for concatenation

:before {
   content: attr(data-price) " " attr(data-currency);
}

  <div data-price="10" data-currency="USD"></div>