CSS псевдоэлемент ::first-letter

CSS селекторы

Значение и применение

Псевдоэлемент ::first-letter позволяет создавать инициал (буквицу) — стилизовать начальный символ текстового блока. Такой метод часто можно встретить в печатных изданиях, например, в сказках.

Допустимые свойства, которые применяются с псевдоэлементом:

Обратите внимание, что в настоящее время используется синтаксис, который предусматривает двойное двоеточие перед псевдоэлементом. Не смотря на то, что браузеры поддерживают оба варианта, рекомендуется использовать синтаксис CSS 3:

/* синтаксис CSS 3 */
селектор::псевдоэлемент {  /* двойное двоеточие */
CSS свойство: значение;
}
/* синтаксис CSS 2 */ 
селектор:псевдоэлемент { /* одинарное двоеточие */
CSS свойство: значение;
}

Поддержка браузерами

СелекторChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
::first-letter1.01.07.0*1.09.0*12.0

CSS синтаксис:

::first-letter {
блок объявлений;
}

Версия CSS

CSS1

Пример использования

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдоэлементы ::first-letter и ::first-line</title>
<style>
::first-letter { /* изменяем начальный символ текстового блока */
color: red; /* устанавливаем цвет шрифта красный */
font-size: 24px; /* задаем размер для первого символа */
}
.test::first-line{ /* изменяем первую строку элемента с классом test */
color: green; /* устанавливаем цвет шрифта первой строки зелёный */
font-family: Arial; /* устанавливаем шрифт Arial для первой строки */
}
</style>
</head>
	<body>
		<p>Яндекс. Найдется, всё.</p>
		<pre class = "test">У лукоморья дуб зелёный;
		Златая цепь на дубе том:
		И днём и ночью кот учёный
		Всё ходит по цепи кругом;
		Идёт направо - песнь заводит,
		Налево - сказку говорит.</pre>
	</body>
</html> 

В этом примере с помощью псевдоэлемента ::first-letter мы установили, что первая буква каждого текстового блока (в нашем случае абзаца - элемент <p>) будет красного цвета и размером 24 пикселя. Кроме того, с использованием псевдоэлемента ::first-line, мы указали, что первая строка в элементе с классом test (элемент <pre>) будет шрифтом Arial зеленого цвета.

Результат нашего примера:

Пример использования псевдоэлементов :first-letter и :first-line.
Пример использования псевдоэлементов :first-letter и :first-line.
CSS селекторы