CSS псевдоэлемент ::first-line
применяет стили к первой строке блочного элемента. Обратите внимание, что длина первой строки зависит от многих факторов, включая ширину элемента, ширину документа и размер шрифта текста.
/* Стили для первой строки элемента <p> */
p::first-line {
color: red;
}
В CSS3 появилась запись ::first-line
(с двумя двоеточиями) для различения псевдоклассов и псевдоэлементов. Браузеры также поддерживают запись :first-line
, введённую в CSS2.
Разрешённые свойства
Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом ::first-line
:
- Все свойства, связанные с шрифтами:
font
,font-kerning
,font-style
,font-variant
,font-variant-numeric
,font-variant-position
,font-variant-east-asian
,font-variant-caps
,font-variant-alternates
,font-variant-ligatures
,font-synthesis
,font-feature-settings
,font-language-override
,font-weight
,font-size
,font-size-adjust
,font-stretch
иfont-family
- Все свойства, связанные с фоном:
background-color
,background-clip
,background-image
,background-origin
,background-position
,background-repeat
,background-size
,background-attachment
иbackground-blend-mode
- Свойство
color
word-spacing
,letter-spacing
,text-decoration
,text-transform
иline-height
text-shadow
,text-decoration
,text-decoration-color
,text-decoration-line
,text-decoration-style
иvertical-align
.
Синтаксис
/* CSS3 syntax */ ::first-line /* CSS2 syntax */ :first-line
Пример
HTML
<p>Стили будут применены только к первой строке этого параграфа.
После этого, весь текст будет отображаться как обычно. Увидели, что я имею в виду?</p>
<span>Первая строка этого элемента не будет стилизована специальным образом
потому что это не блочный элемент.</span>
CSS
::first-line {
color: blue;
text-transform: uppercase;
/* ПРЕДУПРЕЖДЕНИЕ: НЕ ИСПОЛЬЗУЙТЕ ЭТО */
/* Многие свойства запрещены в псевдоэлементах ::first-line */
margin-left: 20px;
text-indent: 20px;
}
Результат
Спецификации
Спецификация | Статус | Комментарий |
---|---|---|
CSS Pseudo-Elements Level 4 Определение '::first-line' в этой спецификации. |
Рабочий черновик | Более точно определяет, где ::first-letter может использоваться.Обобщает разрешённые свойства до типографических, оформления текста, инлайн свойств разметки и opacity .Определяет наследование ::first-letter . |
CSS Text Decoration Module Level 3 Определение 'text-shadow with ::first-line' в этой спецификации. |
Кандидат в рекомендации | Разрешает использовать text-shadow с ::first-letter . |
Selectors Level 3 Определение '::first-line' в этой спецификации. |
Рекомендация | Введение синтаксиса с двумя двоеточиями. |
CSS Level 2 (Revision 1) Определение '::first-line' в этой спецификации. |
Рекомендация | Нет измененений. |
CSS Level 1 Определение '::first-line' в этой спецификации. |
Рекомендация | Изначальное определение, используя синтаксис с одним двоеточием. |
Поддержка браузерами
BCD tables only load in the browser