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

::first-line CSS pseudo-element （CSS 伪元素）在某 block-level element （块级元素）的第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。

和其他所有的 伪元素一样，::first-line 不能匹配任何真实存在的 html 元素。

::first-line 伪元素只能在块容器中，所以，::first-line伪元素只能在一个 display 值为 block, inline-block, table-cell 或者 table-caption中有用.。在其他的类型中，::first-line 是不起作用的。

允许的属性值

在一个使用了 ::first-line 伪元素的选择器中，只有很小的一部分 css 属性能被使用：

这个列表将来可能会被扩展，但是推荐的是，你不要使用任何上述没有提到的属性。

备注：在 CSS 2 中，伪元素是以 : 开头的。由于伪类也遵循同一规则，使得他们之间难以区分。为了解决这个问题，在 CSS 2.1 中，伪元素支持以 :: 开头。现在，使用伪元素时更推荐以 :: 开头，而使用伪类时使用 : 开头。

因为过去的浏览器都实现过 CSS 2 的规则，所以现在那些支持 :: 的浏览器通常同时也支持 : 的形式。

如果需要支持老旧的浏览器，那么 :first-line 是唯一的选择，反之，更推荐使用 ::first-line。

语法

Error: could not find syntax for this item

示例

text-transform

将每个段落中的第一行字母转换成大写

HTML

html
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore.
</p>

CSS

css
p::first-line {
  text-transform: uppercase;
}

输出

margin-left

margin-left 在 first-line 伪元素上无效

HTML

html
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore.
</p>

CSS

css
p::first-line {
  margin-left: 20px;
}

输出

text-indent

text-indent 在 first-line 伪元素上无效

HTML

html
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore.
</p>

CSS

css
p::first-line {
  text-indent: 20px;
}

输出

规范

Specification
CSS Pseudo-Elements Module Level 4
# first-line-pseudo

浏览器兼容性

BCD tables only load in the browser

参见