- h4x3d.com

How to add ascii characters to css /:before:after

How to add characters in front of a link/before a link in css?
Or how to add characters after every link in css?

Let’s say you want to add an ascii character after in front of every link,
because you want to add some detail, yet you dislike the use of images…

Actually it’s easier than you think, here is how:

a:before
{
content: "\3E \ ";
}

This will render likes like this:

> home

Why is the “>” \3E\? You will have to use the HEX code instead of the ascii one in combination with content:

To see a full ascii / hex chart with examples, a good overview, go here

In case you want to append/add content, e.g. a full sentence or a word, after your link you will have to use

a:after
{
content: " days till shazam";
}

This can be used in combination with database queries that output plain numbers such as “30″, you’d then just add a div around it (change a:after to #id:after) and shazam you will get “30 days till shazam“.

I hope this helps anyone.

*note: you will have to use the hex format, because Unicode entities such as (‖) are not supported in combination with content: