Псевдоелементи

5.1 Основні псевдоелементи

Псевдоелементи в CSS дозволяють розробникам додавати стилі та контент до частин документа, які не можна виділити стандартними селекторами. Вони створюють "віртуальні" елементи, які можна стилізувати, як якщо б вони були частиною HTML-розмітки. Це потужний інструмент для створення складних макетів і покращення зовнішнього вигляду вебсторінок.

Що таке псевдоелементи

Псевдоелементи — це ключові слова, додані до селекторів, які дозволяють стилізувати певні частини елементів. Вони створюють віртуальні елементи, що стають частиною візуального оформлення, але не змінюють вихідну HTML-розмітку. Псевдоелементи зазвичай використовуються для стилізації перших літер, рядків тексту, додавання декоративних елементів та інших задач.

Основні псевдоелементи

Деякі з найчастіше використовуваних псевдоелементів включають:

• ::before: додає контент перед вмістом вибраного елемента
• ::after: додає контент після вмісту вибраного елемента
• ::first-letter: стилізація першої літери елемента
• ::first-line: стилізація першого рядка елемента
• ::selection: стилізація виділеного користувачем тексту

Як використовувати псевдоелементи

Псевдоелементи в CSS позначаються подвійними двокрапками (::), хоча деякі псевдоелементи також можуть підтримувати стару однокрапкову нотацію (:) для зворотної сумісності.

Синтаксис:

    
      селектор::псевдоелемент {
        властивість: значення;
        властивість: значення;
        властивість: значення;
        ...
      }
    
  

5.2 Приклади використання псевдоелементів

1. Додавання декоративних елементів

Псевдоелементи часто використовуються для додавання декоративних елементів до або після вмісту елемента:

    
      /* Додавання іконки перед текстом посилання */

      a::before {
        content: "🔗";
        margin-right: 5px;
      }

      /* Додавання декоративного елемента після абзацу */

      p::after {
        content: "❦";
        display: block;
        text-align: right;
        color: red;
      }
    
  

У цих прикладах псевдоелементи ::before і ::after використовуються для додавання іконки перед текстом посилання і декоративного елемента після абзацу відповідно.

2. Стилізація перших літер і рядків

Псевдоелементи можуть використовуватися для стилізації перших літер або перших рядків тексту, що часто застосовується в типографіці:

    
      /* Стилізація першої літери абзацу */

      p::first-letter {
        font-size: 2em;
        font-weight: bold;
        color: #3498db;
      }

      /* Стилізація першого рядка абзацу */

      p::first-line {
        font-weight: bold;
        color: #e74c3c;
      }
    
  

У цих прикладах псевдоелементи ::first-letter і ::first-line використовуються для стилізації першої літери і першого рядка абзацу.

3. Виділення тексту

Псевдоелемент ::selection використовується для стилізації тексту, який виділений користувачем:

    
      /* Стилізація виділеного тексту */

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

У цьому прикладі текст, виділений користувачем, матиме синій фон і білий колір тексту.

5.3 Особливості та обмеження псевдоелементів

Обмеження:

• Тільки одне використання: псевдоелементи ::before і ::after можуть бути використані тільки один раз на кожному елементі
• Вимога content: псевдоелементи ::before і ::after вимагають використання властивості content, навіть якщо вона порожня
• Сумісність із браузерами: сучасні браузери підтримують подвійні двокрапки для позначення псевдоелементів, але для старих псевдоелементів одна двокрапка також працює

Приклад використання властивості content

    
      /* Приклад використання порожнього псевдоелемента для декоративного елемента */

      div::before {
        content: "";
        display: block;
        width: 100%;
        height: 10px;
        background-color: #3498db;
      }
    
  

У цьому прикладі порожній псевдоелемент ::before використовується для додавання декоративної смуги перед вмістом div.