Take this left-pointing triangle: ◁

How would you add this to a psuedo element such as a :after or :before content rule?

There are two methods to achieve this:

  1. Manual
  2. Calculator


Using the White left-pointing triangle as an example, look up the special character on a reference site.

Look for the unicode number:

Unicode number: U+25C1

Replace the U+ with a back-slash. Our css will look like:



If you can not place the special character on a reference site, you can always past the special character into a calculator like this Javascript and CSS Entity Conversion Calculator by Estelle Weyl.

It will then output the css code for you!

Photo credit: Special Shapes by John Fowler, on Flickr