Зачем нужен :before и :after?
Это "до" и "после". 
К примеру чтобы "после"(after) всех ссылок была точка:a:after { content: "." }
htmlbook.ru/css/before
Здесь очень не плохо объяснено и показано на примере.
Да, фактически это узаконенный хак.
Изначально их придумали для задач типа нумерации заголовков, а сегодня уже как только не используют.