Методичка: створення красивого списку

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

Живий приклад

Перший елемент списку
Другий елемент списку
Третій елемент списку
Четвертий елемент списку

HTML-структура

Створюємо звичайний ненумерований список <ul> з класом custom-list. Ніяких додаткових елементів не потрібно — усі маркери згенерує CSS.

<ul class="custom-list">
    <li>Перший елемент списку</li>
    <li>Другий елемент списку</li>
    <li>Третій елемент списку</li>
    <li>Четвертий елемент списку</li>
</ul>

CSS-код з поясненнями

Нижче наведено повний CSS-код, який перетворює звичайний список на стильний. Кожен крок детально прокоментований.

/* Прибираємо стандартні маркери списку */
ul.custom-list {
  list-style: none;      /* вимикаємо звичайні крапки */
  padding: 0;            /* прибираємо внутрішній відступ */
}

/* Базове оформлення кожного елемента */
ul.custom-list li {
  position: relative;   /* для позиціонування псевдоелемента */
  padding-left: 30px;   /* місце під маркер зліва */
  margin-bottom: 10px;  /* відступ між пунктами */
  font-size: 18px;
  line-height: 1.5;
}

/* Головний трюк: створюємо кружечок через ::before */
ul.custom-list li::before {
  content: "";                   /* псевдоелемент без тексту */
  position: absolute;
  left: 0;
  top: 8px;                      /* вертикальне вирівнювання */
  width: 14px;
  height: 14px;
  border-radius: 50%;            /* робимо круглим */
  background: linear-gradient(135deg, #6a11cb, #2575fc); /* градієнт */
  box-shadow: 0 0 5px rgba(0,0,0,0.2); /* легка тінь */
}

/* Додаємо різні кольори для перших чотирьох пунктів */
ul.custom-list li:nth-child(1)::before {
  background: #e74c3c; /* червоний */
}

ul.custom-list li:nth-child(2)::before {
  background: #f1c40f; /* жовтий */
}

ul.custom-list li:nth-child(3)::before {
  background: #2ecc71; /* зелений */
}

ul.custom-list li:nth-child(4)::before {
  background: #3498db; /* синій */
}

Покрокове пояснення

1. list-style: none — прибирає стандартні маркери, щоб ми могли створити власні.

2. position: relative у li — дозволяє позиціонувати псевдоелемент ::before відносно пункту списку.

3. ::before з content: "" — створює порожній псевдоелемент, який ми стилізуємо як маркер. Без content псевдоелемент не з'явиться!

4. border-radius: 50% — перетворює квадратний елемент у коло.

5. linear-gradient — задає градієнтне тло. Можна використовувати один колір або зображення.

6. :nth-child(n) — дозволяє задавати стилі для конкретних пунктів за порядком. Це зручно для різнокольорових маркерів.

Додатково: JavaScript

Ми використовуємо JavaScript для двох функцій: копіювання коду та перемикання теми. Код нижче демонструє, як це зробити.

// Функція копіювання коду
function copyCode(button) {
    const codeBlock = button.parentElement.querySelector('code');
    const text = codeBlock.innerText;
    navigator.clipboard.writeText(text).then(() => {
        button.classList.add('copied');
        button.textContent = 'Скопійовано!';
        setTimeout(() => {
            button.classList.remove('copied');
            button.textContent = 'Копіювати';
        }, 2000);
    }).catch(err => {
        alert('Помилка копіювання: ' + err);
    });
}

// Перемикання теми
const themeToggle = document.getElementById('themeToggle');
themeToggle.addEventListener('click', () => {
    const currentTheme = document.body.getAttribute('data-theme');
    if (currentTheme === 'dark') {
        document.body.removeAttribute('data-theme');
        themeToggle.textContent = '🌙 Тема';
    } else {
        document.body.setAttribute('data-theme', 'dark');
        themeToggle.textContent = '☀️ Тема';
    }
});

Ця методичка створена для вивчення основ CSS. Експериментуйте з кольорами, розмірами та ефектами!