15.1. Псевдоэлементы: первая буква и строка

Существует четыре псевдоэлемента: первая буква, первая строка, стили до и после элемента.

Первая буква

Давайте сделаем первую букву каждого абзаца больше, чем другие и красного цвета. Смотрим пример первый.

Пример 1, CSS

p:first-letter {
    color: red;
    font-size: 2em;
}

Пример 1, HTML

<p>Абзац номер ван</p>
<p>Абзац номер ту</p>

Первая строка

Довольно просто можно сделать красного цвета первую строку.

Пример 2, CSS

p:first-line {
    color: red;
}

Стили "до" и "после" элемента

Допустим, нам нужно перед каждым абзацем ставить тире (-). Сделать это очень просто, при помощи псевдоэлемента before и правила для генерации содержимого content. Смотрим третий пример.

Пример 3, CSS

p:before {
    content: '- ';
}

Пример 3, HTML

<p>Пункт 1</p>
<p>Пункт 2</p>
<p>Пункт 3</p>
<p>Пункт 4</p>

И еще вдруг нам нужно ставить точки в конце абзацев. Для этого есть псевдоэлемент after. Смотрим пример четыре.

Пример 4, CSS

p:after {
    content: '.';
}

Предыдущий урок «14.1. Псевдоклассы: первый дочерний элемент» Следующий урок «1.1. Специфичность в CSS»

Возможно, вам это будет интересно: Структура документа: сестринские элементы в CSS

HTML

CSS

Браузер

Вернуть расположение блоков

Код HTML

Код CSS

Браузер×

Задание

Восстановить код

Чтобы использовать все функции сайта (например, сохранение прогресса прохождения уроков и участие в рейтинге среди пользователей), вам нужно авторизоваться. Это можно сделать пройдя обычную регистрацию с использованием почты или в пару кликов, если у вас есть один из аккаунтов: ВКонтакте, GitHub, Google, Яндекс или Telegram.