Псевдоелемент before для маркера списку, маркер спецсимволом
На більшості веб-сторінок присутні різні списки: меню, списки товарів та інше. При створенні HTML ці списки перетворюються на теги та (нумерований та маркований списки, відповідно).
Марковані списки застосовуються набагато частіше, але їх проблема в тому, що браузери відображають ті самі маркери неоднаково. Ось наприклад, як виглядають маркери list-style: circle;
Це послужило однією з причин появи грамотно зроблених CSS у складі скидання стилів, приблизно таких записів:
Єдина хитрість полягає в тому, що потрібно знати код спецсимволу (можна подивитися у нас у HTML довіднику). У expression спецсимволи можна писати цифровим чи мнемонічним кодом, а властивості content ставимо сліш і шістнадцятковий код (перекладаємо в шістнадцяткову систему звичайний числовий код).
Малюємо маркери самі
Якщо маркер виглядає, наприклад:
тобто його можна намалювати за допомогою background-color та/або border, то тут теж можна обійтися без картинки:
Комбінуємо before та first-child
Як правило, на багатьох сайтах присутні "Хлібні крихти" - список, що показує шлях по сайту від його "кореня" до поточної сторінки. Ось як це виглядає, наприклад, на olimpic.org:
На жаль, безпосередньо на olimpic.org цей фрагмент виглядає так:
Не вдаватимемося в зайві розмови з приводу молодців, які це верстали. Краще розберемо, як це можна зробити правильніше та красивіше.
Насамперед HTML. Це звичайний перелік. Жодних класів для li ми, звичайно, не використовуємо, тому що знаємо як позбутися додаткового класу для першого елемента.
Як вставити спецсимвол перед кожним елементом списку, ми вже знаємо:
Тепер залишився останній штрих. Потрібно вставити спецсимвол не всім поспіль елементам списку, а всім, крім першого. Для цього скористаємося потужним зв'язуванням before+first-child. Власне для всіх нормальних браузерів достатньо буде такого запису:
А для особливо обдарованих (IE 6-7) доведеться підправити expression. У результаті CSS виглядатиме так:
Цей прийом підходить як для «хлібних крихт», так і, наприклад, для різних меню.
Динамічна вставка контенту за допомогою псевдоелемента before дозволяє уникнути використання додаткової картинки та, відповідно, дещо зменшити навантаження на сервер. Застосування прийому обмежене видом маркера та набором адекватних спецсимволів, але для списків у контентній області сайту, де оформлення буває скромним, це хороший варіант.
Зв'язування before+first-child дає можливість позбавитися зайвих класів та елементів при верстці «хлібних крихт» та деяких видів меню.