first-line
CSS ::first-line Pseudo Element
The ::first-line pseudo-element puts a style on a first line in a block-level container. It does not select inline-level elements, such as images or inline-tables.
Some CSS properties can be used to style the ::first-line, they are:
font properties （字体属性）
background properties （背景属性）
text-decoration, text-transform, letter-spacing, word-spacing, color. （-文本装饰、文本转换、字母间距、字间距、颜色。）
The ::first-letter inherits the styles applied using ::first-line. If both elements are used, the styles specified by ::first-letter override those applied by ::first-line.
The ::first-line pseudo-element can also be used with one colon notation :first-line which is supported by all the browsers as well.
Version
Version （版本）
CSS Pseudo-Elements Level 4 （CSS伪元素4级）
Selectors Level 3 （选择器级别3）
CSS Level 2
CSS Level 1 （第1级）
Allowable Properties
Allowable Properties （允许的属性）
The ::first-line pseudo-element accepts only some CSS properties. Let’s see them:
All the properties that are related to font: font, font-kerning, font-style, font-variant, font-variant-numeric, font-variant-east-asian, font-variant-caps, font-variant-alternates, font-variant-ligatures, font-feature-settings, font-language-override, （font-variant-ligatures、 font-feature-settings、 font-language-override、） font-weight, （字体粗细） font-size, font-size-adjust, font-stretch, and font-family, （font-size, font-size-adjust, font-stretch和 font-family ，）
All the properties related to background: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode,
Some properties used for styling text: text-shadow, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, and vertical-align,
The CSS color property, （- CSS颜色属性，）
word-spacing, line-height, letter-spacing, text-transform and text-decoration. （-字间距、 行高、 字母间距、 文本转换和文 本装饰。）
Specificity and Inheritance of the ::first-line Pseudo-element
Specificity and Inheritance of the ::first-line Pseudo-element
The portion of a child element occuring on the first line, from the ::first-line pseudo-element inherits only the properties that are applicable to the ::first-line pseudo-element. For the rest of the properties it inherits from the non-pseudo-element parent of the ::first-line pseudo-element. For example, the ::first-letter pseudo-element is used for styling the element’s first letter. It inherits the styles applied by the ::first-line pseudo-element.
When there is a conflict between styles that are applied using the ::first-line pseudo-element and the styles applied on a paragraph, the first one always wins, even in the cases, when the paragraph has a special style rule that is set with an !important bash.
Syntax
Syntax （语法）
::first-line {
css declarations;
}
Example of the ::first-line pseudo element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::first-line {
color: #85d6de;
text-transform: uppercase;
}
</style>
</head>
<body>
<h2>::first-line selector example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>
Result
