Выделение первой буквы в заголовке, тексте, абзаце на CSS

Заметка на тему: CSS

Иногда в качестве элемента дизайна так и хочется сделать отдельный стиль для первой буквы параграфа/абзаца, текста или заголовка. И такая возможность есть прямо в CSS: выделить первую букву в заголовке, тексте или абзаце можно с помощью так называемых псевдоэлементов, а именно псевдоэлемента :first-letter.

Возьмем для примера изменение в каждом заголовке h2 цвета первой буквы, что я сделал прям в своем блоге для быстрого визуального отделения заголовков от текста. Сделать это можно вот таким кодом:

Основной фишкой здесь является то, что псевдоэлемент :first-letter выбирает именно первую букву в указанном селекторе (теге h2 в данном примере), а не весь селектор целиком, как бы было без :first-letter.

По аналогу можно применить псевдоэлемент :first-letter так же и для параграфа (тега p) или любых div блоков. Причем в скобках "{ }" можно указать как новый цвет для первой буквы, так и даже изменение размера шрифта, заливки и так далее. При желании можно сделать очень отличающуюся от всех необычную первую букву.

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