:before Pseudo-Elements When Dealing with Prices

[realph]

I’m building a site where my client is going to be regularly inputting prices. At the moment all they need to do is type in the price, and using the :before element I chuck a pound sign (£) in front of the number. This looks a little something like this:

.price:before {
content: ‘£’;
}
The problem I’m running into is some prices are prefixed with the word “from”, which as you might have guessed look a little like this:

£from 15

Is there a way to use the :before element before the first number using pure CSS?

Any help would be appreciated. Thanks in advance!

[Paulie_D]

Basically…no.

You could do

.price:after {
content: ‘pounds’;
}

[Kitty Giraudel]

If I may, the currency is kind of an important part of the price thus it probably shouldn’t be inserted with CSS.

[Paulie_D]

>If I may, the currency is kind of an important part of the price thus it probably shouldn’t be inserted with CSS.

Indeed, the symbol is content and should be part of the HTML…it’s not a style applied to the price.

[realph]

@Paulie_D @HugoGiraudel You guys are right, I’ll make them punch in the pound sign. Thanks!

[Author]

Posts