CSS-трюк с background-image

Довольно интересное применение псевдо-элемента :before показал Nicolas Gallagher в своем блоге. Плюс в том, что мы избавляемся от лишних презентационных элементов в теле документа и выносим их в CSS.
В коде это выглядит так:

#content {
  position:relative;
  z-index:1;
  background:#4B92C0;
}
#content:before {
   content:""; /*вместо того, чтобы создавать div с фоном и позиционировать внутри родительского блока*/
   position:absolute;
   z-index:-1;
   bottom:10px;
   right:10px;
   width:500px;
   height:300px;
   background:url(image.jpg);
}

А в теле документа при этом никаких дополнительных элементов:

<div id="content"></div>

Пример по ссылке.
(поддерживается браузерами: Firefox 3.5+, Opera 10+, Safari 4+, Chrome 4+, IE 8+)

Псевдо-фон из спрайта

Также показан интересный прием при работе со спрайтами: фоновое изображение подрезается по размерам псевдо-элемента.
css background :before

.someclass a:before {
   content:"";
   float:left;
   width: 24px; /*эти размеры определяют область, которая будет «вырезана» из спрайта*/
   height: 24px;
   margin:0 5px 0 0;
   background:url(sprite.png);
}
.class1 a:before {background-position:0 -24px;}
.class2 a:before {background-position:0 -48px;}
.class3 a:before {background-position:0 -72px;}
.class4 a:before {background-position:0 -96px;}

В теле документа это выглядит таким образом:

<ul class="someclass">
   <li class="class1"><a href="#">Ссылка раз</a></li>
   <li class="class2"><a href="#">Ссылка два</a></li>
   <li class="class3"><a href="#">Ссылка три</a></li>
   <li class="class4"><a href="#">И у каждой свой фон</a></li>
</ul>

Пример в новом окне.