::first-line¶
Псевдокласс ::first-line
применяет стили к первой строке элемента уровня блока.
Обратите внимание, что длина первой строки зависит от многих факторов, включая ширину элемента, ширину документа и размер шрифта текста.
Псевдо-элементы
- ::after
- ::backdrop
- ::before
::cue
- ::first-letter
- ::first-line
::grammar-error
::marker
::part()
- ::placeholder
- ::selection
::slotted()
::spelling-error
Синтаксис¶
/* Selects the first line of a <p> */
p::first-line {
color: red;
}
Значения¶
Только малый поднабор свойств 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
.
Спецификации¶
- CSS Pseudo-Elements Level 4
- CSS Text Decoration Module Level 3
- Selectors Level 3
- CSS Level 2 (Revision 1)
- CSS Level 1
Поддержка браузерами¶
Описание и примеры¶
<p>
Styles will only be applied to the first line of this paragraph. After that,
all text will be styled like normal. See what I mean?
</p>
<span
>The first line of this text will not receive special styling because it is
not a block-level element.</span
>
::first-line {
color: blue;
text-transform: uppercase;
/* WARNING: DO NOT USE THESE */
/* Many properties are invalid in ::first-line pseudo-classes */
margin-left: 20px;
text-indent: 20px;
}