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

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

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

Примеры

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

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

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

:hover наведение на элемент :invalid неверное заполнение элементов форм :nth-last-child по номеру элемента в дереве с конца :nth-of-type по тегу и номеру элемента :valid верное заполнение элементов форм backface-visibility background-attachment поведение фонового изображения при скролле font-family семейство шрифтов font-weight толщина шрифта grid-template-areas элементы grid сетки margin внешний отступ max-width максимальная ширина min-width минимальная ширина text-overflow поведение скрытого текста word-break как делать перенос текста

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

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

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