Псевдо элемент для вывода спрайтов

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

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

Но спрайты плохо использовать, когда не задан, ни один из параметров. Рассмотрим теги (<p></p>). Можно использовать резиновый шаблон, однако будет сложно вычислить ширину (даже если удастся вычислить ширину, то преимущества спрайта все равно не будут замечены, поскольку спрайт будет растянут на весь параграф). Параграф также может иметь любое количество символов, поэтому точно определить высоту также не удастся. Но и тут есть возможность использовать спрайты.

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

<p>
<span class="star"></span>
Текст...
</p>

 

Для заданной структуры задействуем код CSS, который устанавливает спрайт элементу star.

 .star {

       /* Размер звезды в спрайте */
       width: 22px;
       height: 22px;

       /* Спрайт */
       background: url(images/sprite.png) -24px 0 no-repeat;

       /* Позиционирование/Отступы */
      float: left;
      margin: 0 10px 2px 0;
    }

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

<p class="star">
Текст...
</p> 

Используем псевдо элемент CSS :before

.star:before {
       /* Пустое содержание, которое нужно для того, чтобы псевдо элемент был выведен на экран */
       content: "";

       /* Размер звезды в спрайте */
       width: 22px;
       height: 22px;

       /* Спрайт */
       background: url(images/sprite.png) -24px 0 no-repeat;

       /* Позиционирование/Отступы */
      float: left;
      margin: 0 10px 2px 0;
    }

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