Наверное, вы задаётесь вопросами, как создавать спрайт и почему именно псевдоэлементы?

Создать спрайт можно как вручную в Фотошопе, так и воспользовавшись специальным сервисом. Например, сервис CSS Sprite Generator позволяет легко загрузить и объединить в спрайт несколько изображений, а также получить CSS-код с их координатами в спрайте.

Псевдоэлементы для вставки спрайтов удобны по двум причинам. Во-первых, с псевдоэлементами не требуется добавлять дополнительные элементы в разметку страницы. Во-вторых, псевдоэлементы легко можно спозиционировать и задать им нужные размеры. Возможность задать размеры очень важна, но об этом на следующем шаге.

А сейчас разместим псевдоэлементы поверх текущих иконок, и зададим им одну и ту же фоновую картинку — спрайт.