CSS :: Псевдоэлемент ::first-line

Псевдоэлемент ::first-line (от англ. first line – первая строка) позволяет выбрать первые строки блочных элементов требуемого типа, которые отсчитываются от начала текста до принудительного либо автоматического перевода текста на новую строку. При этом ширина строки может меняться в зависимости от ширины блочного элемента, но стиль первой строки будет оставаться постоянным вплоть до перевода на новую строку. К псевдоэлементу могут применяться только свойства, относящиеся к шрифтам, тексту, цвету и фону, хотя в зависимости от браузера могут применяться и некоторые другие свойства. Например, если задано правило p::first-line {блок объявлений}, то данный стиль будет применен ко всем первым строкам абзацев.

Селекторы псевдоэлементов выбирают элементы требуемого типа, явно не указанные в дереве элементов html-документа и соответствующие требованиям указанного в селекторе псевдоэлемента, который отделяется от элемента двумя двоеточиями «::».

Синтаксис

<селектор>::first-line {блок объявлений}

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-pseudo-4/#first-line-pseudo

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/::first-line

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
	
		div::first-letter{
		color: red;			 
		}
		
		p::first-line{
		color: blue;			 
		}
		
	</style>
	
</head>
<body>

	<div>
		Первая буква блока будет красной.<br>
		Весь остальной текст будет обычным.
	</div>
	
	<p>
		А у меня будет синей вся первая строка.<br>
		А я не синяя, т.к. вторая.
	</p>
	
</body>
</html>

Пример №1