jerz
jerz

Reputation: 65

What is the best way to display a price with a smaller $ sign on the left using CSS?

I need to display ex: $300.00, but I need the dollar sign to be displayed smaller than the number so its going to look like a trademark, but not that small.

Is there a CSS function that does that?

Thank you in advance.

Upvotes: 3

Views: 14205

Answers (6)

Rokive
Rokive

Reputation: 825

But only if not empty!

.currency:not(:empty):before {
        top: 0;
        content: "$";
}
<span class="currency">10.5</span><br />
<span class="currency"></span><br />
<span class="currency">42</span><br />

Upvotes: 2

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201768

If you really must do this, use

<small>$</small>300.00

and, if desired, set the size of small in CSS, e.g.

small { font-size: 75% }

Upvotes: 0

lante
lante

Reputation: 7336

Could be something like this?

HTML:

<span class="dollar">300.00</span>

CSS:

.dollar:before {
    content: '$';
    font-size: somethingSmaller;
}

See this fiddle and let me know if this helps.

Upvotes: 16

shennan
shennan

Reputation: 11676

Use a <span> element to style in-line text:

HTML:

<span class="currency">$</span>
<span class="price">300</span>

CSS:

.currency{

  font-size:.5em;
  vertical-align:text-top; /* resembling more the tm symbol you mentioned */

}

A fiddle for convenience...

The difference from lante's answer is that this will work in much older browsers as well. For more info, see the support for :before and :after pseudo elements.

Upvotes: 1

Satwik Nadkarny
Satwik Nadkarny

Reputation: 5133

A very simple way to do this would be :

HTML :

<div class="text">
   <span class="dollar">$</span>300
</div>

CSS :

.text {
    font-size: 18px;
}

.dollar {
    font-size:15px;
}

See here->http://jsfiddle.net/xMKsH/

However, if you understand pseudo-selectors well, you would be better off using this:

HTML:

<div class="text">300</div>

CSS:

.text {
    font-size: 18px;
}
.dollar:before {
    content:'$';
    font-size:15px;
}

See here->http://jsfiddle.net/xMKsH/1/

Hope this helps!!

Upvotes: 0

s_ferdie
s_ferdie

Reputation: 56

Use the :before pseudo selector

.amount:before {
  content: "$";
  font-size:.9em;
}

Upvotes: 0

Related Questions