Текстовые значения для CSS-свойства list-style-type, как?

Question

Я бы хотел настроить способ представления элементов неупорядоченных списков.

Я знаю, что могу использовать list-style-type для переключения между none, disc, circle, squareи другие более или менее поддерживаемые значения.Я также знаю, что можно изменить внешний вид маркеров списка по умолчанию, указав изображение на list-style-image свойство.

Проблема в том, что я хочу заменить маркер на large right arrow (►, ►)Специальный символ HTML вместо использования комбинации list-style-image и треугольного изображения.

Возможно ли это?Кстати, если это имеет значение, jQuery уже загружен на страницу, так что это не будет проблемой, если он поможет.

Спасибо.

- РЕДАКТИРОВАТЬ -

Спасибо, я буду использовать одну или другую версию в зависимости от того, какой браузер требуется для поддержки.Кстати, оба ответа великолепны, и решить, кто из них является «победителем», непросто, поэтому я выбрал ответ, который был дан первым.

Answer 1

Насколько мне известно, это невозможно сделать с помощью свойства list-style-type .

Однако, если ваш браузер поддерживает CSS : before Селектор, вы можете использовать его для вставки маркеров перед элементами списка.Вам нужно только преобразовать код объекта в шестнадцатеричный:

ul {
    list-style-type: none;
}

li:before {
    content: "\25ba\00a0";
}

. Вы можете найти jsFiddle, демонстрирующий это здесь .

Answer 2

@ Фредерик показывает интересный обходной путь, с которым я бы пошел, если только вам не нужно поддерживать IE6 и 7 - в этом случае вам придется работать с обычным элементом HTML, который содержит символ, и который вы вводите в стиль поместите это в правильное место.

Что-то вроде

ul { list-style-type: none } /* Adjust margin and padding as you see fit */
ul li div.bullet { float: left; width: 30px; margin-right: 12px }

<li>
 <div class="bullet">&#9658;</div>
 List item 1
</li>

Answer 3

Если вы используете метод : before , чтобы получить свой стиль списка, подумайте о добавлении отступа к списку и отрицательного поля к элементу списка, чтобы получить то же место при разрыве строки:

ul {
    list-style: none;
    padding: 0 0 0 24px
}
ul > li:before {
    content: '\25BA';
    float: left;
    margin-left: -24px
}

Просто используйте пример postet из тридцати точек, чтобы попробовать jsfiddle