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

Учимся добавлять оформительские «довески» к элементам и выбирать их по значению атрибутов.

Псевдоэлемент создаёт виртуальную часть элемента (например, вставку до или после содержимого), которой можно задать стиль.

::before и ::after

Эти псевдоэлементы вставляют содержимое до и после содержимого элемента. Они пишутся через два двоеточия и обязательно требуют свойство content — иначе ничего не появится.

<p class="note">Сохраните черновик</p>

.note::before {
  content: "\2705 ";  /* галочка */
}

.note::after {
  content: " \2014 важно";
}

Перед текстом появится галочка, а после — приписка «— важно». Важно: это декоративное содержимое, его нет в разметке и его не выделить мышью как обычный текст. Поэтому в content не кладут смысловую информацию — только украшения: иконки, кавычки, разделители.

Очень частый приём — нарисовать декоративный элемент пустым content и стилями:

.divider::after {
  content: "";
  display: block;
  height: 2px;
  background: #ddd;
}

Здесь после элемента появляется тонкая серая линия-разделитель, хотя в HTML её нет.

::first-line и ::first-letter

Можно оформить только первую строку или первую букву абзаца:

p::first-letter {
  font-size: 200%;
  color: crimson;
}

Первая буква каждого абзаца станет вдвое крупнее и малиновой — приём «буквица», как в книгах.

Псевдоклассы и псевдоэлементы — в чём разница

Их легко перепутать. Псевдокласс (одно двоеточие) выбирает элемент в особом состоянии (:hover). Псевдоэлемент (два двоеточия) создаёт новую виртуальную часть элемента (::before). Два двоеточия — это и есть подсказка: «здесь рождается отдельный кусочек».

Атрибутные селекторы

Можно выбирать элементы по наличию атрибута или его значению — это пишут в квадратных скобках.

/* все поля с типом email */
input[type="email"] {
  border: 1px solid teal;
}

/* все ссылки с target */
a[target] {
  color: purple;
}

Первое правило найдёт <input type="email">, второе — любые ссылки, у которых есть атрибут target (с любым значением).

Поиск по части значения

Есть операторы для частичного совпадения — очень полезные для ссылок:

Запись	Смысл
`[href^="https"]`	значение начинается с https
`[href$=".pdf"]`	значение заканчивается на .pdf
`[class*="btn"]`	значение содержит btn

/* подсветить внешние защищённые ссылки */
a[href^="https"] {
  font-weight: bold;
}

/* добавить иконку файлам PDF */
a[href$=".pdf"]::after {
  content: " (PDF)";
}

Так можно автоматически помечать все PDF-ссылки, не трогая разметку каждой из них.

Итог

::before / ::after вставляют декоративное содержимое через content.
Псевдокласс (одно :) — состояние; псевдоэлемент (два ::) — новая часть элемента.
Атрибутные селекторы ([type=...], ^=, $=, *=) выбирают по значению атрибута.