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

/* Стили для первой буквы элемента <p> */p::first-letter {  font-size: 130%;}

Может быть непросто определить первую букву элемента:

• Пунктуация, которая предшествует или следует сразу за первой буквой, включается в селектор. Пунктуация включает любой символ Юникода, определённый в классахopen (Ps),close (Pe),initial quote (Pi),final quote (Pf), andother punctuation (Po).
• В некоторых языках существуют диграфы, которые должны преобразовываться в верхний регистр вместе, напримерIJ в Нидерландском. В этих случаях обе буквы диграфа должны соответствовать псевдоэлементу::first-letter (это слабо поддерживается браузерами, смотритетаблицу совместимости ниже).
• Комбинация псевдоэлемента::before и свойстваcontent может привести к добавлению некоторого текста в начало элемента. В этом случае псевдоэлементу::first-letter будет соответствовать первая буква добавленного содержимого.

Разрешённые свойства

Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом::first-letter:

• Все свойства, связанные с шрифтами:font,font-style,font-feature-settings,font-kerning,font-language-override,font-stretch,font-synthesis,font-variant,font-variant-alternates,font-variant-caps,font-variant-east-asian,font-variant-ligatures,font-variant-numeric,font-variant-position,font-weight,font-size,font-size-adjust,line-height иfont-family
• Все свойства, связанные с фоном:background,background-color,background-image,background-clip,background-origin,background-position,background-repeat,background-size,background-attachment иbackground-blend-mode
• Все свойства для внешних отступов:margin,margin-top,margin-right,margin-bottom,margin-left
• Все свойства для внутренних отступов:padding,padding-top,padding-right,padding-bottom,padding-left
• Все свойства, связанные с рамкой: сокращенияborder,border-style,border-color,border-width,border-radius,border-image и полные записи свойств
• Свойстваcolor
• Свойстваtext-decoration,text-shadow,text-transform,letter-spacing,word-spacing (when appropriate),line-height,text-decoration-color,text-decoration-line,text-decoration-style,box-shadow,float,vertical-align (только еслиfloat равенnone)

Синтаксис

Пример

Сделаем первую букву каждого абзаца красной и большой.

HTML

<p>  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita  kasd gubergren, no sea takimata sanctus est.</p><p>  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie  consequat.</p><p>  Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit  lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure  dolor in hendrerit in vulputate velit esse molestie consequat.</p><p>-Начало специального знака препинания.</p><p>_Начало специального знака препинания.</p><p>"Начало специального знака препинания.</p><p>'Начало специального знака препинания.</p><p>*Начало специального знака препинания.</p><p>#Начало специального знака препинания.</p><p>「特殊的汉字标点符号开头。</p><p>《特殊的汉字标点符号开头。</p><p>“特殊的汉字标点符号开头。</p>

CSS

p::first-letter {  color: red;  font-size: 130%;}

Результат

Спецификации

Совместимость с браузерами

Смотрите также

• ::first-line