CODEWITHSUNDEEP
csshtml
jacobdo
jacobdo

Reputation: 1615

Adding space between two attributes in a pseudo element content

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.

Upvotes: 3

Views: 795

Answers (2)

Shiv Kumar Baghel
Shiv Kumar Baghel

Reputation: 2490

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>

Upvotes: 4

Nacorga
Nacorga

Reputation: 526

I think of this solution:

.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>

Upvotes: 3

Related Questions