Стилизуем первую строку текста с помощью CSS псевдоэлемента first-line

Главная

База знаний

css

Псевдоэлементы в CSS

Псевдоэлемент first-line в CSS. Полное руководство с примерами

29 апреля 2025

Автор

Дмитрий Нечаев

CSS предоставляет множество возможностей для стилизации элементов веб-страницы. Одной из таких возможностей является стилизация первой строки текста с помощью псевдоэлемента ::first-line. В этой статье мы подробно рассмотрим, как использовать этот псевдоэлемент, какие свойства можно применять и приведем примеры использования.

Что такое ::first-line?

Псевдоэлемент ::first-line позволяет применить стили только к первой строке блока текста. Это может быть полезно для создания визуально привлекательных текстовых блоков, улучшения читаемости или выделения важной информации.

Основные свойства, применимые к ::first-line

Не все CSS-свойства могут быть применены к псевдоэлементу ::first-line. Список допустимых свойств ограничен, поскольку стилизация строки текста должна учитывать изменение длины строки при изменении размеров окна браузера. К допустимым свойствам относятся:

font — семейство шрифтов, размер шрифта, вес шрифта и стиль.
color — цвет текста.
background — фон текста (цвет, изображение и т.д.).
word-spacing — расстояние между словами.
letter-spacing — расстояние между буквами.
text-decoration — украшение текста (например, подчеркивание).
text-transform — преобразование текста (например, все буквы заглавные).
line-height — высота строки.

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

Рассмотрим несколько примеров, демонстрирующих использование псевдоэлемента ::first-line.

Пример 1: Изменение цвета и размера шрифта первой строки

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример ::first-line</title>
    <style>
        p::first-line {
            color: blue; /* Изменяем цвет текста первой строки */
            font-size: 1.5em; /* Увеличиваем размер шрифта первой строки */
        }
    </style>
</head>
<body>
    <p>
        Первая строка этого абзаца будет синего цвета и увеличенного размера. Остальной текст останется без изменений.
    </p>
</body>
</html>

Пример 2: Применение фона и преобразования текста первой строки

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример ::first-line</title>
    <style>
        p::first-line {
            background-color: yellow; /* Задаем фон первой строки */
            text-transform: uppercase; /* Преобразуем текст первой строки в верхний регистр */
        }
    </style>
</head>
<body>
    <p>
        Первая строка этого абзаца будет иметь желтый фон и все буквы будут заглавными. Остальной текст останется без изменений.
    </p>
</body>
</html>

Ограничения псевдоэлемента ::first-line

Важно помнить, что ::first-line работает только с блочными элементами, такими как <p>, <div>, <h1> - <h6>. Он не будет работать с инлайновыми элементами, такими как <span>. Кроме того, изменения, внесенные в первую строку, могут изменять её длину, что может повлиять на восприятие текста.

Пример 3: Некорректное использование ::first-line

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример ::first-line</title>
    <style>
        span::first-line {
            color: red; /* Это свойство не сработает, так как span является инлайновым элементом */
        }
    </style>
</head>
<body>
    <span>
        Этот текст не будет стилизован с помощью ::first-line, так как span является инлайновым элементом.
    </span>
</body>
</html>

Заключение

Псевдоэлемент ::first-line предоставляет удобный способ стилизации первой строки текста в блочных элементах. Используя его, можно сделать текст более привлекательным и читабельным. Однако важно учитывать ограничения и применять только допустимые свойства для достижения желаемого эффекта.

Стилизуйте первую строку текста осознанно и с пониманием особенностей её поведения, чтобы ваш веб-контент был не только красивым, но и функциональным.