CODEWITHSUNDEEP
csswordpress
i Bands
i Bands

Reputation: 31

Currency sign after the price class in CSS

I am using a Wordpress 3rd party theme and it limits me because for customization i need to (guess what) pay even more... even for small things like this...

I have this class which shows me the "€" currency sign after the price "1000 €" But i have a price range like this: 1000 - 2000 €

How can I put the currency sign after the 1000, so it will look like this (1000 € - 2000 €) ??

HTML code : 

<span class="post-rice"><span class="text">Prices:</span>6000 - 7000</span>

At this moment i use this CSS code:


.post-rice:after{content:"€";}
.post-rice:before{content:"€";}

But with those CSS codes I have the price like this:( € 1000 - 2000 € ) ... The :before method is not correct. Can you please give me an advice ?

Upvotes: 0

Views: 597

Answers (1)

rileyjsumner
rileyjsumner

Reputation: 563

Something like this is probably what you are looking for. Right now the HTML interprets your span as one block of text, so the :before selector will put content in front of the whole text block.

HTML

<span class="post-rice">
  <span class="text">Prices:</span>
  <span class="price">6000</span> - <span class="price">7000</span>
</span>

CSS

.price::after {
  content: "€" // alternatively use "content: &#8364;" 
}

Upvotes: 2

Related Questions