Grow your CSS skills. Land your dream job.

:before Pseudo-Elements When Dealing with Prices

  • # June 19, 2013 at 3:50 pm

    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!

    # June 19, 2013 at 3:55 pm

    Basically…no.

    You could do

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

    # June 19, 2013 at 4:11 pm

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

    # June 19, 2013 at 4:15 pm

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

    # June 19, 2013 at 8:50 pm

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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".