Зачем нужен :before и :after?

Question

[trevoga_su]

Давно хотел узнать. Я понимаю для чего эти псевдоэлементы нужны, но не понимаю, как и для чего их использую в разработке, когда они не выполняют свои естественные визуальные задачи, а применяются как хак что ли...
Ну во пример - nicolasgallagher.com/pure-css-gui-icons/demo - в соседней теме ссылку увидел. Начал разбирать как эти иконки устроены, а там.. не понятно. Там есть такое:

li::before, li::after, li a::before, li a::after {
    content: "";
    left: 0;
    position: absolute;
    top: 50%;
}

вот зачем тут это все? content с :before и :after?

UPD: ЧИТАЙТЕ ВНИМАТЕЛЬНЕЕ ВОПРОС!!! Я в курсе что есть RTFM!!!111

Comments

[Zhainar]

само название говорит за себя, псевдо элемент

Answer 1

[Ainur Shakirov]

Это "до" и "после".
К примеру чтобы "после"(after) всех ссылок была точка:
a:after { content: "." }
htmlbook.ru/css/before
Здесь очень не плохо объяснено и показано на примере.

Comments

[trevoga_su]

это и так понятно. вопрос в другом. каким боком они нужны в виде хаков?

[Ainur Shakirov]

trevoga_su, на то они и "хаки"
Удобно ставить всякие элементы дизайна.

Answer 2

[dom1n1k]

Да, фактически это узаконенный хак.
Изначально их придумали для задач типа нумерации заголовков, а сегодня уже как только не используют.