Квадратні маркери списків ul в CSS

Вивчаємо значення square властивості list-style-type для створення квадратних маркерів у ненумерованих списках.

За замовчуванням список ul має круглі маркери. За допомогою властивості list-style-type можна змінити їх вигляд.

Якщо встановити значення square, маркери списку будуть відображатися у вигляді квадратиків.

<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

ul {
  list-style-type: square;
}

❗ Важливо:

Значення square змінює тільки вигляд маркера, а текст пунктів списку залишається без змін.

📌 Завдання:

№1. Створіть список ul з назвами фруктів.
№2. Змініть стандартні маркери на квадратні за допомогою list-style-type: square.
№3. Додайте власні елементи до списку.

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

Спробуйте також значення disc, circle та none, щоб порівняти різні види маркерів.

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

ul {
  list-style-type: square;
}