К чему может получить доступ псевдоэлемент

К чему может получить доступ псевдоэлемент?

Псевдоэлементы (::before, ::after, ::first-letter, ::first-line) — это виртуальные элементы, создаваемые CSS. Они имеют свои ограничения в доступе к содержимому и свойствам.

Основные псевдоэлементы

::before и ::after:

/* Создают виртуальные элементы до и после содержимого */
p::before {
  content: "➤ "; /* Могут содержать текст или изображения */
}

p::after {
  content: " [конец]"; /* Добавляют текст после элемента */
}

<p>Текст параграфа</p>
<!-- Результат: ➤ Текст параграфа [конец] -->

::first-letter:

p::first-letter {
  font-size: 2em;
  color: red;
  float: left; /* Первая буква увеличивается и становится буквицей */
}

::first-line:

p::first-line {
  font-weight: bold;
  text-transform: uppercase; /* Первая строка текста становится заглавной */
}

К чему имеют доступ псевдоэлементы?

1. CSS свойства (большинство работают)

p::before {
  content: "Текст"; /* Обязательно для ::before и ::after */
  color: blue;           /* Цвет текста */
  font-size: 14px;       /* Размер шрифта */
  font-weight: bold;     /* Вес шрифта */
  background: yellow;    /* Фон */
  padding: 10px;         /* Внутренние отступы */
  margin: 5px;           /* Внешние отступы */
  border: 1px solid red; /* Границы */
  width: 100px;          /* Ширина */
  height: 50px;          /* Высота */
  display: block;        /* Тип отображения */
  position: absolute;    /* Позиционирование */
  transform: rotate(45deg); /* Трансформации */
  opacity: 0.8;          /* Прозрачность */
  z-index: 10;           /* Слой */
}

2. Свойства, которые НЕ работают для ::before и ::after

p::before {
  /* НЕ работают: */
  /* - float (не может быть поплавком) */
  /* - position: relative (относительное позиционирование имеет ограничения) */
  /* - vertical-align (не работает как ожидается) */
  /* - margin: auto (не центрирует автоматически) */
  /* - width: auto (не расширяется по содержимому) */
}

3. Содержимое (content свойство)

/* Текст */
p::before {
  content: "Текст";
}

/* URL изображения */
img::after {
  content: url('image.png');
}

/* Атрибут элемента */
a::after {
  content: " (" attr(href) ")"; /* Вывести URL ссылки */
}

/* Счётчик */
li::before {
  content: counter(item) ". ";
}

/* Комбинация */
p::before {
  content: "[" attr(data-label) "]"; /* Вывести data-атрибут */
}

Практические примеры

1. Увеличенная первая буква (буквица)

p::first-letter {
  font-size: 2em;
  font-weight: bold;
  float: left;
  color: #8b0000;
  line-height: 60px;
  padding-right: 8px;
}

2. Украшение ссылок

a::after {
  content: " " attr(title); /* Показать title атрибут */
  color: gray;
  font-size: 0.8em;
}

<a href="/page" title="Перейти на страницу">Ссылка</a>
<!-- Результат: Ссылка Перейти на страницу -->

3. Кавычки

q::before {
  content: open-quote; /* Открывающая кавычка */
}

q::after {
  content: close-quote; /* Закрывающая кавычка */
}

<q>Цитата</q>
<!-- Результат: "Цитата" -->

4. Стрелки для списков

li::before {
  content: "→ ";
  color: blue;
  font-weight: bold;
  margin-right: 10px;
}

5. Счётчики

ol {
  list-style: none; /* Убрать стандартную нумерацию */
  counter-reset: item; /* Начать считать с 0 */
}

li {
  counter-increment: item; /* Увеличить счётчик */
}

li::before {
  content: counter(item) ". "; /* Вывести номер */
  font-weight: bold;
}

6. Разделители

li::after {
  content: " | "; /* Добавить разделитель */
}

li:last-child::after {
  content: ""; /* Убрать последний разделитель */
}

Что НЕ могут делать псевдоэлементы?

// НЕ видны в DOM
const elements = document.querySelectorAll('p::before');
console.log(elements.length); // 0 — псевдоэлементы не в DOM

// НЕ могут быть выбраны JavaScript
const before = document.querySelector('p::before');
console.log(before); // null

// НЕ имеют события
// Клик на псевдоэлемент срабатывает на родительском элементе
p::before {
  cursor: pointer; /* Можно изменить курсор */
}

Ограничения доступа

/* Некоторые свойства не работают для ::first-letter и ::first-line */
p::first-letter {
  background: yellow;     /* Работает */
  color: red;             /* Работает */
  font-size: 2em;         /* Работает */
  margin: 0 5px;          /* НЕ работает полностью */
  padding: 0 5px;         /* Работает */
  border: 1px solid;      /* НЕ работает для ::first-letter */
  float: left;            /* Работает */
  clear: none;            /* НЕ работает */
}

p::first-line {
  color: blue;            /* Работает */
  font-weight: bold;      /* Работает */
  text-transform: uppercase; /* Работает */
  letter-spacing: 2px;    /* Работает */
  word-spacing: 10px;     /* Работает */
  line-height: 1.5;       /* Работает */
}

Ключевые моменты

• Псевдоэлементы создаются CSS, НЕ видны в DOM
• ::before и ::after требуют свойства content
• Большинство CSS свойств работают для псевдоэлементов
• Нельзя выбрать псевдоэлемент JavaScript (он не в DOM)
• ::first-letter и ::first-line имеют собственные ограничения
• Полезны для украшения, добавления символов, счётчиков