Balloon messages in #CSS3 using the pseudo elements ::before/::after

I had lately balloon messages to design for a project. And I didn’t want to go the old approach, using graphics and a whole markup block just to display a single message.

The target

This is what i wanted my balloon message approach to be capable of:

  • no graphics – not even for the “speakers corner”, the call out part
    so I search for “how to build triangles in CSS” and found some stuff on that
  • no additional markup –¬†transform a single <tag/> with its content to a balloon message
  • all CSS(3)

The result


and here the simple HTML markup

And here the DEMO with even more stuff, a whole chat and also how to prepare a tool tip without any JS.

IE8, oh noes

oh yes. Unfortunately this is only working in FF3.5+, SA1.3+, OP9.5+ and CH2+ — but not in IE8. Not yet. Let’s see what IE9 will bring us.

Have a look on for more info on compatibility.

More on ::before and ::after

More about the pseudo elements :before and :after and how to use them in webdesign you can read on Nicolas Gallaghers blog and about the new notation style ::before and ::after you’ll find here some info.

2 thoughts on “Balloon messages in #CSS3 using the pseudo elements ::before/::after”

    1. Definitely – seems as if I was quite a year right behind yours – I used exactly the same approach.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">