CSS псевдоэлемент ::first-letter

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

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

Следующие CSS свойства могут быть использованы для применения стиля к ::first-letter:

  • font свойства
  • margin свойства
  • padding свойства
  • border свойства
  • background свойства
  • text-decoration, text-transform, letter-spacing, word-spacing, float, vertical-align, color, line-height, text-shadow, box-shadow свойства.
Спецификация CSS3 представила ::first-letter, чтобы различать псевдоклассы от псевдоэлементов.

Версия

CSS1

Синтаксис

::first-letter {
  css declarations;
}

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p::first-letter {
      font-size: 35px;
      color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Пример селектора ::first-letter</h2>
    <p> Lorem Ipsum - это текст-"рыба"...</p>
  </body>
</html>

Рассмотрим другой пример, где псевдоэлемент ::first-letter принимает знак препинания и цифру за первую букву:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p::first-letter {
      font-size: 35px;
      color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Пример селектора ::first-letter</h2>
    <p>-Lorem Ipsum - это текст-"рыба"...</p>
    <p>1Lorem Ipsum - это текст-"рыба"...</p>
  </body>
</html>

Поддержка браузера

chrome edge firefox safari opera
9.0+ 12.0+ 3.5+ 5.1+ 12.1+

Практикуйте свои знания

Какие свойства поддерживает псевдоэлемент ::first-letter в CSS?
Считаете ли это полезным?