CSS - первый символ заголовка почти, как у Яндекса

Сейчас я покажу один из вариантов выделения цветом первой буквы/символа строки без дополнительного кода в виде дополнительных спанов(<span>...</span>), дивов (<div>...</div>) и всех прочих. На самом деле подобное достигается буквально парой строчек кода с использованием псевдоэлемента:

h1:first-letter, h2:first-letter {
    color:#FF0000;
    ...
   /* Иные манипуляции со стилями */
}

Где рабочий пример в действии? Приглядитесь к заголовку моей статейки. увидели эффект? Работает в последних версиях Firefox, Chrome. Opera, да и в Intenet Explorer 8.

Нелишним будет отметить, что на сайте самого Яндекса подобное выполнено добавлением дополнительной разметки в виде добавления класса к тегу <b>. Авторизуйтесь и всё увидите в левом верхнем углу, - там где ваш логин-никнейм.





© 2012-2014 Druweb.ru. Вы можете спокойно копировать любые материалы сайта только при наличии обратной ссылки.