сначала ссылка
я честно прривел ссылку, откуда это взял, но возможно ссылка не работает с другого ресурсаhttp://habrahabr.ru/blog/css/32786.htmтеперь сам текст (обрезанный)
Задаем ему базовые стили, фоновый цвет и фоновое изображение (звездочки справа):
h1{
border-top: 1px solid #094eaa;
border-bottom: 1px solid #094eaa;
background: #002261 url(/images/stars.jpg) right center no-repeat;
}
Все как обычно. Но теперь нам надо добавить звездочку слева. Делается это так:
h1:first-letter {
background: url(/images/star.jpg) left center no-repeat;
padding: 7px 0 6px 30px;
}
Самый важный момент здесь в том, что нужно обязательно поставить пробел между самим псевдоклассом :first-letter и открывающей фигурной скобкой, иначе псевдокласс не отработает в IE6.
h1:first-letter{ /*Не сработает*/
property: value;
}
h1:first-letter { /*Сработает, так как есть пробел перед фигурной скобкой*/
property: value;
}
Есть еще один момент. Если нужно указать одни и те же стили для нескольких элементов и один из них псевдокласс :first-letter, то нужно обязательно вставить пробел при перечислении элементов, перед запятой. То есть:
h1:first-letter, .someclass { /*Не сработает*/
property: value;
}
h1:first-letter , .someclass { /*Сработает, так как есть пробел перед запятой*/
property: value;
}
,
Может :before также работает, надо проверить, но хочется спать
