Unicode characters in CSS

CSS3 has brought a bunch of very interesting improvements to the web development community. Among them there's a very nice one that allows developers to add content inside a page via CSS.

The content property allows us to add specific content to an element of the page. And if we can add content, we can add unicode characters. This way we can limit the use of image icons and instead use special unicode characters that have the same (or similar) looks.

Here's how it works: let's assume we want to add a small heart icon (like this one ❤) next to a favorite link. Let's also assume that our link has a class names .favorite. The HTML for our link will look like this:

 <a href="#" class="favorite">My favorite link</a> 

Now the only thing we need to add is the CSS to our stylesheet, using the :before or :after pseudo-element. We also add an escaped space character to separate the heart symbol from the rest of the text.

 .favorite:before{ content: "\2764\ "; }
.favorite:after{ content: "\ \2764"; }

What happens is the content is added before (or after, if we choose to) the element we selected and the final result can be seen below.

My favorite link
My favorite link

The best part of this method is that no extra, unneeded content is added to the page and the HTML is not cluttered with junk content.