First letter

:first-letter — это псевдоэлемент, представляющий первый символ в тексте.

Работает только для блочных элементов.

К :first-letter применяется ограниченное количество свойств:

  • float
  • width (только к элементу c float)
  • margin
  • padding
  • background
  • border
  • vertical-align (только к элементу без float)
  • line-height
  • text-decoration
  • text-transform
  • letter-spacing
  • word-spacing
  • font properties
  • color

Пример:

Добавление float “утапливает” букву в текст

:first-letter не срабатывает, если до текста стоит картинка, но работает, если её скрыть c display: none:

Мне понравилось такое оформление :first-letter:

float позволяет установить для :first-letter ширину и выравнивание текста по центру.

Можно по-разному оформить первый символ в тексте, но при этом нужно точно знать, что текст не будет начинаться с картинки.

Спецификация: w3.org/TR/css3-selectors/#first-letter

Если вы нашли ошибку или неточность, вы можете отредактировать статью с помощью prose.io, а также можно написать мне в комментариях или в Twitter.
Система комментирования от Disqus