Reputation: 1615
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
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
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