::first-line

::first-line

::first-line伪元素将样式应用于块级元素的第一行。请注意，第一行的长度取决于许多因素，包括元素的宽度，文档的宽度以及文本的字体大小。

::first-line {
  color: blue;
  text-transform: uppercase;
}

只有一小部分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引入了::first-line符号（用两个冒号）来区分伪类和伪元素。在CSS2中引入后，浏览器也接受:first-line。

语法

/* CSS3 syntax */
::first-line

/* CSS2 syntax */
:first-line

实例

HTML

<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>

CSS

::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;
}

结果

规范

浏览器兼容性