Какие знаешь псевдоэлементы?

Псевдоэлементы в CSS

Псевдоэлементы — это ключевые слова, которые добавляются к селектору через :: и позволяют стилизовать определённые части элемента или добавлять контент. Это не реальные HTML элементы, а виртуальные части элемента.

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

1. ::before и ::after

Создают виртуальные элементы до и после содержимого элемента. Это одни из самых полезных псевдоэлементов.

/* Добавляем иконку перед текстом */
.button::before {
  content: "→ "; /* обязательное свойство для ::before и ::after */
  margin-right: 8px;
}

/* Добавляем кавычки после текста */
blockquote::after {
  content: "—";
  display: block;
  margin-top: 10px;
}

/* Создание триггера (галочка) */
.done::after {
  content: "✓";
  color: green;
  margin-left: 10px;
}

Практический пример: красивая кнопка

<style>
  .btn {
    position: relative;
    padding: 10px 20px;
    border: none;
    background: #3498db;
    color: white;
    cursor: pointer;
    overflow: hidden;
  }
  
  .btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
  }
  
  .btn:hover::before {
    width: 300px;
    height: 300px;
  }
</style>

<button class="btn">Hover me</button>

2. ::first-line

Стилизирует первую строку текстового элемента. Работает только с блочными элементами.

p::first-line {
  font-weight: bold;
  color: red;
  text-transform: uppercase;
}

<p>
  Это первая строка текста, она будет жирной и красной.
  А это вторая строка, она будет обычной.
</p>

3. ::first-letter

Стилизирует первую букву элемента. Часто используется для красивых инициалов.

p::first-letter {
  font-size: 2em;
  font-weight: bold;
  color: #d4af37;
  float: left;
  margin-right: 0.1em;
  line-height: 1;
}

<p>
  Давным-давно в одном королевстве...
  Первая буква будет огромной и золотой!
</p>

4. ::selection

Стилизирует выделенный (selected) текст пользователем.

::selection {
  background-color: #3498db;
  color: white;
}

/* Для Firefox */
::-moz-selection {
  background-color: #3498db;
  color: white;
}

p::selection {
  background-color: yellow;
  color: black;
}

5. ::placeholder

Стилизирует плейсхолдер (подсказка) в форме.

input::placeholder {
  color: #999;
  font-style: italic;
  opacity: 0.7;
}

textarea::placeholder {
  color: #aaa;
  font-size: 14px;
}

<input type="text" placeholder="Введите имя...">
<textarea placeholder="Напишите комментарий..."></textarea>

6. ::marker

Стилизирует маркеры списков (точки, номера).

li::marker {
  color: #e74c3c;
  font-weight: bold;
  font-size: 1.2em;
}

ol li::marker {
  color: blue;
}

<ul>
  <li>Первый пункт</li>
  <li>Второй пункт</li>
</ul>

7. ::backdrop

Стилизирует фон полноэкранного элемента или модального окна.

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

8. ::cue

Стилизирует субтитры в видео.

video::cue {
  background: black;
  color: white;
  font-weight: bold;
}

9. ::slotted()

Стилизирует элементы внутри Web Components slot.

::slotted(p) {
  color: blue;
  margin: 10px 0;
}

::slotted(.highlight) {
  background-color: yellow;
}

10. ::grammar-error и ::spelling-error

Стилизируют элементы с ошибками (браузер-зависимо).

::spelling-error {
  text-decoration: red wavy underline;
}

::grammar-error {
  text-decoration: green wavy underline;
}

Псевдоэлементы vs Псевдоклассы

Часто путают, но это разные вещи:

/* Псевдоклассы — состояния элемента (:) */
a:hover {}    /* когда мышь над ссылкой */
a:active {}   /* при клике */
a:visited {}  /* посещённая ссылка */
input:focus {} /* элемент в фокусе */

/* Псевдоэлементы — части элемента (::) */
p::first-line {}  /* первая строка параграфа */
a::before {}      /* перед ссылкой */
input::placeholder {} /* плейсхолдер */

Синтаксис: одно двоеточие vs двойное

/* Старый синтаксис (до CSS3) — одно двоеточие */
p:first-line { }
p:before { }

/* Новый синтаксис (CSS3+) — двойное двоеточие */
p::first-line { }
p::before { }

/* Браузеры поддерживают оба для совместимости */
p:first-line {} /* работает */
p::first-line {} /* работает */

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

Пример 1: красивая цитата

blockquote {
  position: relative;
  padding-left: 30px;
}

blockquote::before {
  content: "«";
  position: absolute;
  left: 0;
  font-size: 3em;
  color: #3498db;
  opacity: 0.3;
}

blockquote::after {
  content: "»";
  color: #3498db;
  opacity: 0.3;
  margin-left: 0.1em;
}

Пример 2: нумеровать элементы CSS

.list-item::before {
  content: counter(item) ". ";
  counter-increment: item;
  font-weight: bold;
  margin-right: 10px;
}

.list {
  counter-reset: item;
}

Пример 3: стрелка для меню

.menu-item::after {
  content: "→";
  margin-left: 10px;
  opacity: 0;
  transition: opacity 0.3s, margin-left 0.3s;
}

.menu-item:hover::after {
  opacity: 1;
  margin-left: 15px;
}

Пример 4: очистка float

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Ограничения псевдоэлементов

1. Нельзя стилизировать некоторые свойства — например, ::before и ::after не могут иметь подобные себе элементы
2. Не видны в DOM — они существуют только для стилизации
3. Обязательное свойство content — для ::before и ::after нужно указать content (хотя бы пустую строку)
4. Ограниченная поддержка — некоторые браузеры не поддерживают все псевдоэлементы

Таблица поддержки браузерами

Резюме

Основные псевдоэлементы, которые нужно знать:

1. ::before и ::after — добавление контента до и после элемента
2. ::first-line и ::first-letter — стилизация начальных частей текста
3. ::selection — стилизация выделенного текста
4. ::placeholder — стилизация подсказок в формах
5. ::marker — стилизация маркеров списков

Эти псевдоэлементы позволяют создавать красивые эффекты без дополнительного HTML кода, что делает их очень ценными для frontend разработчика.