Хочу рассказать Вам все о сайтах, что узнал сам за 9 лет.
Блог Виталия Жукова Vitalik.WS Свой сайт с нуля - легко!
Обо мне, как об авторе блога.
Подробнее
Vitalik.WSЗаметки → Выделение первой буквы в заголовке, тексте, абзаце на CSS

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

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

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


Заголовок 1

Заголовок 2

Заголовок n+


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

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

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

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

  • Комментариев еще нет.
    Оставьте свой комментарий первым!
Написать свой комментарий:
Отправить
ВНИМАНИЕ! Пожалуйста НЕ пишите в комментариях рекламу, оскорбления, бессмыслицу и прочие проявления интернет-нечисти, так как эти сообщения всеравно не будут опубликованы. Пишите исключительно по теме и ваш комментарий обязательно будет опубликован, а возможно и прокомментирован.
 Подписывайтесь на мой блог
Хотите первыми узнавать о самом интересном? Тогда подпишитесь на рассылку новостей.
Подписаться
Подписавшись на рассылку, Вы всегда будете в первую очередь узнавать о самой важной и полезной для блоггеров и веб-мастеров информации.