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

✨ ::before, ::after, ::first-letter, ::first-line, ::selection

Псевдоэлементы позволяют стилизовать части элемента или добавлять новое содержимое без изменения HTML. Отличаются от псевдоклассов двойным двоеточием ::.

1. ::before и ::after — вставка содержимого

Псевдоэлементы ::before и ::after вставляют содержимое до или после содержимого элемента. Обязательно требуется свойство content.

Пример 1: добавление иконки перед текстом

.note::before {
    content: "📌 ";
    color: #14b8a6;
    font-weight: bold;
}

Это важное примечание

✅ Перед текстом появилась иконка и пробел

Пример 2: добавление текста после элемента

.price::after {
    content: " ₽";
}

1000

✅ После числа добавился символ валюты

Пример 3: декоративная линия через ::after

.title::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background-color: #14b8a6;
    margin-top: 5px;
}

Заголовок с линией

✅ Под заголовком появилась декоративная линия

2. ::first-letter — первая буква

Позволяет стилизовать первую букву текста внутри элемента.

p::first-letter {
    font-size: 2rem;
    color: #14b8a6;
    font-weight: bold;
}

Этот абзац начинается с большой и красивой буквы.

✅ Первая буква увеличена и выделена цветом

3. ::first-line — первая строка

Стилизует первую строку текста внутри элемента (зависит от ширины окна). Первая строка определяется браузером по переносам, а не по тегу <br>.

p::first-line {
    font-weight: bold;
    color: #530899;
}

Это очень длинный текст, который точно не поместится в одну строку, потому что мы ограничили ширину контейнера. Первая строка будет выделена, а вторая и следующие — нет.

✅ Первая строка выделена жирным и фиолетовым, остальные — обычные

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

4. ::selection — выделенный текст

Стилизует текст, который пользователь выделил мышкой.

::selection {
    background-color: #14b8a6;
    color: white;
}

Попробуй выделить этот текст мышкой. Фон выделения станет бирюзовым, а текст — белым.

✅ При выделении текст меняет цвета

📌 Важно: Псевдоэлементы ::before и ::after не работают без свойства content. Даже пустое content: ""; нужно писать обязательно.

📓 Из тетради: «Псевдоэлементы — это способ добавлять украшения, не загрязняя HTML. Иконки, подписи, декоративные линии — всё это можно сделать через CSS. Но помните: вставляемый контент не индексируется поисковиками, поэтому важную информацию (цены, ключевые слова) ставьте прямо в HTML».