Справочник HTML & CSS

::first-letter

Оформляет первую букву первой строки блока — для буквиц.

Синтаксис

selector::first-letter { … }

Примеры

Буквица:

<style>
  .story::first-letter {
    float: left;
    font-size: 3em;
    line-height: 1;
    margin-right: 6px;
    color: firebrick;
  }
</style>
 
<p class="story">Once upon a time there was a small town by the sea, where every house was painted a different color and every street led to the harbour.</p>

Примечания

Работает только у блочных элементов. Разрешены лишь некоторые свойства: шрифты, цвета, отступы, float и ещё несколько.

См. также

::first-line — Оформляет первую отображённую строку блока — сколько бы слов на ней ни поместилось.
float — Прижимает элемент к левому или правому краю, чтобы текст обтекал его.
font-size — Размер шрифта.

Вопросы и ответы по теме

Как оформить первую букву абзаца

В учебнике

Псевдоэлементы — Как оформить часть элемента или добавить декоративное содержимое — before, after, first-letter, marker, placeholder и selection.

Спасибо, что читаете!