Reputation: 65
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
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
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
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
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
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
Reputation: 56
Use the :before pseudo selector
.amount:before {
content: "$";
font-size:.9em;
}
Upvotes: 0