Добавление пробела между двумя атрибутами в содержимом псевдоэлемента

Question

У меня есть следующий html

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

, и я хочу создать псевдоэлемент, который отображает данные в таких атрибутах, как это:

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

Моя проблема в том, что пространствоне добавлено между.Есть ли такой особый способ достичь этого, не упуская места перед самим атрибутом?Спасибо.

Answer 1

использовать content: attr(data-price) " " attr(data-currency); не использовать + для объединения

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

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

Answer 2

Я думаю об этом решении:

.myClass:before {
 content: attr(data-price);
 margin-right: 5px;
}

.myClass:after {
 content: attr(data-currency);
}

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