<tessa harmon />

Today I needed to create a menu element with arrows indicating an expanded or collapsed state. Because I like to avoid images as much as possible, I decided to implement this using unicode characters.

I went over to Copy Paste Character, grabbed the arrows I wanted, and tried inserting them like so:

li:before {
  content: "▸";
}
li.expanded:before {
    content: "▾";
}

This just resulted in the string “&#9656;” being prepended literally to my li.

The secret is that the character is in decimal form and you must convert it to hexadecimal using a handy converter. 

Then, simply use the hexadecimal formatted code prepended by a \ and you’re golden.

The code becomes:

li:before {
  content: "\25B8";
}
li.expanded:before {
    content: "\25BE";
}