109. Псевдоэлементы: первая буква и строка
Существует четыре псевдоэлемента: первая буква, первая строка, стили до и после элемента.
Первая буква
Давайте сделаем первую букву каждого абзаца больше, чем другие и красного цвета. Смотрим пример первый.
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: '.';
}
Похожие уроки и записи блога
- Сделайте цвет первых букв (у четырех абзацев) красного цвета. HTML код менять нельзя. Используйте теорию из этого урока.
– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте.
– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить на любом популярном форуме в интернете.
Это займет не больше минуты.