Separated to reusable CSS classes, with support for IE.

arrows.css

/* Daniel Ott
 * entities.css
 * 31 January 2011
 * 
 * Updated: 28 May 2013
 * Son Tran
 *
 * Adding arrows to thinks makes them more clickable. Right?
 * Use CSS's :after pseudo-selector to insert hexadecimal values
 * of html entities into the document. Less markup. More awesome.
 */
 .up-arrow,
 .right-arrow,
 .down-arrow,
 .left-arrow {
  *zoom: expression( 
   	this.runtimeStyle.zoom="1",
  		this.appendChild( document.createElement("ie") ).className="after"
  	);
 }
 
 .up-arrow:after, .up-arrow > .after {
  content:'\00a0\25b2';
}

.right-arrow:after, .up-arrow > .after {
  content:'\00a0\25b6';
}

.down-arrow:after, .down-arrow > .after {
  content:'\00a0\25bc';
}

.left-arrow:after, .left-arrow > .after {
  content:'\00a0\25c0';
}

/*-----------------------------------------------
A cheat sheet of entities I've used
-------------------------------------------------

Entity    Hexcode   Description
     \00a0     A space
▲   \25b2     Up-pointing triangle ▲
▴   \25b4     Up-pointing small triangle ▴
▶   \25b6     Right-pointing triangle ▶
▸   \25b8     Right-pointing small triangle ▸
▼   \25bc     Down-pointing triangle ▼
▾   \25be     Down-pointing small triangle ▾
◀   \25c0     Left-pointing triangle ◀
◂   \25c2     Left-pointing small triangle ◂

-----------------------------------------------*/