Тире типа стиля списка HTML
Есть ли способ создать стиль списка в HTML с тире (т.е. - или – – или — —) т.е.
<ul>
<li>abc</li>
</ul>
Вывод:
- abc
Мне пришло в голову делать это с чем-то как li:before { content: "-" };, хотя я не знаю недостатки той опции (и был бы очень обязан для обратной связи).
Более в общем я не возражал бы знать, как использовать универсальные символы для элементов списка.
2 ответа
Вы можете использовать :before и content:, помня, что это не поддерживается в IE 7 и ниже. Если вас это устраивает, то это лучшее решение. Смотрите таблицы совместимости CSS Can I Use или QuirksMode для полной информации.
Несколько более неприятное решение, которое должно работать в старых браузерах, - использовать изображение для точки буллита и просто сделать его похожим на тире. Примеры смотрите на странице W3C list-style-image.
Я не знаю, есть ли лучший способ, но вы можете создать собственный графический маркер с изображением тире, а затем сообщить браузеру, что вы хотите использовать его в своем списке, с помощью list-style- тип свойство. Пример на этой странице показывает, как использовать рисунок в качестве маркера.
Я никогда не пробовал использовать: before так, как вы, хотя это может сработать. Обратной стороной является то, что он не будет поддерживаться некоторыми старыми браузерами. Моя интуиция подсказывает, что это все еще достаточно важно, чтобы принять во внимание. В будущем это может быть не так важно.
РЕДАКТИРОВАТЬ: Я провел небольшое тестирование подхода OP. В IE8 я не мог заставить эту технику работать, так что это определенно еще не кроссбраузерность. Более того, в Firefox и Chrome установка параметра list-style-type на none в сочетании, по-видимому, игнорируется.