Вставка псевдоэлементів у CSS

Вивчаємо псевдоелементи ::before і ::after, властивість content та створення додаткових елементів через CSS.

Вставка псевдоелементів у CSS

Псевдоелементи ::before і ::after дозволяють додавати додатковий контент до HTML-елементів без зміни структури документа.

::before — додає елемент перед вмістом.
::after — додає елемент після вмісту.
content — визначає текст або значення, яке буде вставлено.

Псевдоелемент ::after

За допомогою ::after можна додавати символи або текст після існуючого вмісту елемента.


<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>


li::after {
  content: ".";
}

Створення декоративних елементів

Псевдоелементи часто використовують для створення декоративних блоків, іконок та інших елементів дизайну.


<p>
  <span>Текст</span>
  <span>Другий текст</span>
</p>


span {
  position: relative;
}

span::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: red;
  right: 0;
  top: -10px;
}

❗ Важливо:

Псевдоелементи не існують у HTML-коді. Вони створюються тільки браузером під час відображення сторінки.

Практичні завдання

📌 Завдання:

№1. Дан список ul. Додайте крапку в кінці кожного li через ::after.
№2. Створіть псевдоелемент у span у вигляді червоного квадратика.
№3. Розташуйте квадратик над текстом справа через position: absolute.


/* Завдання 1 */

li::after {
  content: ".";
}


/* Завдання 2 */

span {
  position: relative;
}

span::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: red;
  right: 0;
  top: -10px;
}

💡 Показати підказку

Для абсолютного позиціонування псевдоелемента батьківський елемент повинен мати position: relative.

✅ Показати відповідь


<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<style>
li::after {
  content: ".";
}

span {
  position: relative;
}

span::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: red;
  right: 0;
  top: -10px;
}
</style>