How to add * with smaller font size in html - html

Question

I have the text
Coupon*
in font size 30px. However I want to make the * not in 30px but smaller. How can I achieve this?
http://jsfiddle.net/LkLGE/
Thanks

Answer 1

To keep the asterisk aligned on the top, you can put the character in a <sup> tag and reduce its font-size:
<div class="text">Coupon<sup>*</sup></div>
.text {
font-size: 30px;
}
.text sup {
font-size: .5em;
}
JSFiddle example

Answer 2

As an alternative to <span> based answers <sup or <sub> or <small> might be a better starting point from a semantic standpoint.
<sup> is superscript and will raise the *.
<sub> is subscript and will lower the *.
<small> might require adding some css *, but shouldn't already have a position change. See http://www.w3.org/TR/html5/text-level-semantics.html#the-small-element
Fiddle to show it in action: http://jsfiddle.net/6jmKT/

Answer 3

Coupon<span style="font-size:any size that you want">*</span>

Answer 4

I'm not sure about your case, but sometimes you want to do this in many places. Sometimes, you'll have a "new" or "special" item and you'll add a class with javascript to denote this.
Think about if you have to change this somewhere and how many places you might need to edit this span. Of course you could find-and-replace, but try THIS FIDDLE out and see what you think. CSS content() is pretty amazing for stuff like this.
HTML
<div class="thing special">
<!-- where special might be added by javascript -->
Coupon
</div>
CSS
.thing {
font-size: 30px;
color: blue;
}
.special:after {
display: inline-block;
/* so you can use "block" like stuff on it - (margin-top etc) */
/* this way you wouldn't have to change it in the html in a ton of places. just one - here. */
content: "*";
font-size: 15px;
color: red;
/* just for specific positioning */
vertical-align: top;
margin-left: -8px;
margin-top: 5px;
}
OR
sup is totally cool too - I think...
HTML
<p>Coupon<sup class="star">*</sup></p>
CSS
p {
font-size: 30px;
}
p .star {
font-size: 15px;
color: red;
}

Answer 5

When in doubt, put it in a span - FIDDLE
#myspan {
font-size: 10px;
}
This FIDDLE is a bit reductio ad absurdum, but it was fun!

Answer 6

You can use span and you can use <sup> tag:
EXAMPLE
<div class="text">Coupon<span class="star"><sup>*</sup></span></div>
.text {
font-size: 30px;
}
.star {
font-size: 12px;
}
http://jsfiddle.net/LkLGE/4/

Answer 7

The most robust way is to use the small element. If you wish to tune its effect to some specific size reduction, it is best to use a class attribute on it. Example:
<style>
.ast { font-size: 70% }
</style>
...
Coupon<small class=ast>*</small>
However, the asterisk “*” is rather small in many fonts, so size reduction easily makes it too small. If you think you need to reduce its size, you probably need a different font.