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

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

Первая буква

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

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

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

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

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

p:first-line {
    color: red;
}

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

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

p:before {
    content: '- ';
}

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

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

p:after {
    content: '.';
}

Чтобы использовать все функции сайта (например, сохранение прогресса прохождения уроков), вам нужно авторизоваться

1. Сделайте цвет первых букв (у четырех абзацев) красного цвета. HTML код менять нельзя. Используйте теорию из этого урока.

– Не пропускайте новостей, подпишитесь на нашу страницу ВК, Facebook или Twitter.

– Не знаете как сделать? Нажмите на кнопку Обсуждение и задайте вопрос!