I want to create a cool looking yet simple exclamation mark with just CSS. Anyone have any cool ideas?

  • you're willing to apply a class to that particular exclamation point?
    – jackJoe
    May 8 '11 at 9:43
  • I'm voting to close because this is off-topic relating to CSS and entirely opinion based as well.
    – Ryan
    Jan 6 '14 at 20:08

You could find a font that has a very unique "!" and use the Font Squirrel @font-face generator and choose expert settings with custom subsettings and only include the ! character for the font.

Add the font to your stack as the first font and it will only render for the !

For this example I chose Heartbreaker Regular as the font and created an @font-face kit.

enter image description here

The specimen which is falling back to Helvetica for everything except the !.

enter image description here

  • Not quite sure this is what the OP asked for.
    – Hanna
    May 8 '11 at 8:59
  • 3
    @font-face is CSS and is there a way to style single characters without adding extra markup to the HTML?
    – Chris_O
    May 8 '11 at 9:17
  • I'm sure there's way to markup certain characters, but that would involve scripts. It's easier to use HTML markup and just assign a CSS class.
    – Hanna
    May 8 '11 at 22:44
  • 1
    As chris states, this can be done with CSS.
    – DA01
    May 9 '11 at 5:04

You can create a simple exclamation mark using pure CSS + HTML markup:


<p>This is a simple paragraph  <span class="exc_mark"><span></span></span></p>


.exc_mark {
position: relative;
top: -5px;
left: 3px;
width: 10px;
font-size: 8px;
border: 3px solid #888;
background-color: #888;
border-radius: 3px;

.exc_mark span {
position: absolute;
top: 15px;
left: -3px;
border: 3px solid #888;
border-radius: 3px;
height: 1px;
width: 1px;
background-color: #888;

The span's CSS will do the work.

It's not the best looking exclamation mark, but you can play with CSS3's border-radius property, border-width and gradients as backgrounds to get a much better look. Creativity is the limit.


I like the font-squirrel suggestion - very neat! This will also work using Cufon, which some people may be more familiar with.

If you are using a jQuery or other toolkit on the page you can search and replace the exclamation marks with something else, e.g. wrap a class around them. Then you can do a Cufon.now on that class.

From there on you can put in some animations, title tags, whacky any-thing - however - bear in mind that exclamation marks are generally best used sparingly! Except in the offices of the Exclamation Mark Liberation Front! (I made that last bit up! But you get the idea !?!?!!?)

  • Didn't think about how seldom Exclamation Marks are actually used. The poor lonely character needs to be liberated...
    – Chris_O
    May 9 '11 at 22:15

Google fonts is your answer. The only thing you need to do (besides loading google fonts in your HTML file) is to give it a style.

Besides that, it is way faster then sifr, @font-face, cufon etc. plus with the font-viewer you can see different fonts really quick.

To give it a little edge you can always a a shadow in CSS.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.