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

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

p::first-letter {
    color: red;
}
  • поддерживается начиная с
  • частичная поддержка до
  • не поддерживается

Примеры

Как работает псевдоэлемент first-letter

В этом примере видно, что псевдоэлемент ::first-letter работает только для блочных элементов. Если вам нужно использовать данный псевдоэлемент для строчных элементов, например для span, то пропишите данному элементу свойство display со значением block или inline-block.

Читайте также

::after псевдоэлемент :visited посещенная ссылка animation-delay задержка старта анимации animation-duration время длительности анимации background все правила фона background-attachment поведение фонового изображения при скролле border-color цвет границы border-right-color цвет границы справа border-style стиль границы flex flex-grow + flex-shrink + flex-basis flex-flow flex-direction + flex-wrap font все правила шрифта font-style наклон шрифта overflow-y переполнение по оси Y transform-style плоскость дочерних элементов

Обсуждение (2)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии

Albert
В Хроме не работает. вернее работает только на первый абзац, следующие абзацы уже не отображают свойств псевдо-класса.
Денис
:first-line не добавили.