How to Include HTML Entities in CSS Content Property

Recently, I ran into a situation where I was asked to modify a couple of pagination buttons so that the left and right arrows were replaced with the « and » symbols. Now, I won’t go into a ton of background details, but let’s just say that modifying the source code of the page wasn’t the best approach in terms of maintainability. Instead I decided to use the content property in CSS to add the symbols on the fly.

If you’re not familiar with the content property, it allows you to insert content either before or after an element:

img:before {
    content: 'This will be before the image ';
}

img:after {
    'This will be after the image';
}

If you drop that into a webpage, it will put the phrase “This will before the image” and “This will be after the image” before and after every image, respectively. Now, this is all pretty straight forward stuff if you want to put simple text before or after an element, but what about special characters? Well, you’d think you’d be able to do something like this:

img:before {
    content: '«'
}

img:after {
    '&raquo';
}

Unfortunately, instead of displaying the appropriate symbols on the page, the string literals of “«” and “»” get displayed. To get around this, you need to use the hex values of the html entities. How do you get the hex values of the entity you’re trying to include? Well, you could always roll your own entity conversion script or you could just paste the character into the Entity Conversion Calculator. Once you figure out the appropriate hex values, all you have to do is plugin them into your CSS:

img:before {
    content: '\00AB'
}

img:after {
    '\00BB';
}