Why use images when CSS can too. How to create simple arrow images in CSS and avoid downloading images.

Pause:  Play:  Arrow:

How it works

The CSS trick here is to use the 2 pseudo elements named ::before and ::after. They cannot be defined in the html but only using CSS rules. Here all sizes are based on em to allow using them inline.

The pause button is the simplest here. It defines a absolute positioned rectangular element at position 0,0 and another one a 0.5em to the right.

<span class="pause"></span>

The play button is using a zero-sized element with a border on 2 sides. Without rotation this looks like but with some rotation and scaling (1/sqrt(2)) it works inline. .

<span class="play"></span>

The arrow button is combining both. The block in the ::before element is rotated with the main element and must be rotated back.

<span class="arrow"></span>

You ma find examples with a single colon notation like :after. This still works in current browsers but CSS3 defined the double colon notation like ::after for pseudo elements and use the single colon notation for pseudo-classes like :hover.

CSS in use:

See also