Pause: Play: Arrow:
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.