See the sticker-like green badge up at the top of this post, designating it "sticky"? It got there thanks to the WordPress post_class() function and a little CSS trick — the before: pseudo-element.

So here's a pushpin that I'm going to use to style some text:

Pink Pushpin!

There's no jQuery or floated PNG image to add that pushpin to the grey box. Instead, it relies on the CSS pseudo-attribute :before.

Let's look at the code I used to make this happen

div.pushpin {
   position: relative;
   padding: 10px;
   background: #e1f2da;
   border: 1px solid #CCC;
}
div.pushpin:before {
   content: url(../images/pushpin.png);
   position: absolute;
   right: -25px;
   top: -10px;
}

I used the same approach to make the "sticky" image style my post.

.sticky:before {
   content: url(../images/sticky.png);
   position: absolute;
   right: -10px;
   top: 1px;
}