::first-line (:first-line)
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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
.
Синтаксис
Error: could not find syntax for this item
Пример
HTML
<p>
Стили будут применены только к первой строке этого параграфа. После этого,
весь текст будет отображаться как обычно. Увидели, что я имею в виду?
</p>
<span
>Первая строка этого элемента не будет стилизована специальным образом потому
что это не блочный элемент.</span
>
CSS
::first-line {
color: blue;
text-transform: uppercase;
/* ПРЕДУПРЕЖДЕНИЕ: НЕ ИСПОЛЬЗУЙТЕ ЭТО */
/* Многие свойства запрещены в псевдоэлементах ::first-line */
margin-left: 20px;
text-indent: 20px;
}
Результат
Спецификации
Specification |
---|
CSS Pseudo-Elements Module Level 4 # first-line-pseudo |
Совместимость с браузерами
BCD tables only load in the browser