Use & middot; вместо пули для <ul>

Я нашел статью о свойства стиля списка в CSS, но не перечисляет & middot; (& middot;) в качестве опции, в отличие от по умолчанию disc или & bullet; (& Пули;). Есть ли способ сделать это с помощью HTML или CSS?

Ответ 1

CSS (работает в любом браузере, поддерживающем :before и content:):

li:before { 
    content: '\b7\a0'; /* \b7 is a middot, \a0 is a space */
}
li {
    list-style:none;
    text-indent:-.5em; /* helps make it look more like it a bullet. */
}

Внимание: Это не настоящий стиль списка. Поэтому, когда у вас есть завернутые списки, это будет выглядеть смешно. Это может быть смягчено отрицательным текстовым отступом нескольких единиц, чтобы заставить его функционировать больше как стиль списка.

Другая реализация:

li:before {
    content: '\b7\a0';
    position:absolute;
    right:100%
}
li {
    list-style:none;
    position:relative;
}

Эта версия работает лучше. Я часто использую :before и :after для добавления дополнительных вещей, таких как границы, но если вы добавляете пулю, я думаю, что это не так. Несмотря на то, что это альтернативное предложение, оно, вероятно, является предпочтительным.

Ответ 2

Да! Вы можете использовать псевдо-класс before, чтобы вставить символ перед каждым элементом.

.DotList li:before
{
    content: "·";
}

Здесь приведен пример jsFiddle.

Ответ 3

list-style-type не выбирает, какой символ использовать, он выбирает абстрактный маркер для использования. Обратите внимание на стандартные состояния:

Значение "none" не указывает маркер, в противном случае существуют три типа маркеров: глифы, системы нумерации и алфавитные системы.

Символы задаются с помощью диска, круга и квадрата. Их точный рендеринг зависит от пользовательского агента.

Для большего контроля над маркером вы должны либо установить изображение с помощью list-style-image, либо использовать :before псевдо-элемент и content свойство, установив list-style-type в 'none', :before и content свойство не поддерживаются в IE 7 и более ранних версиях, поэтому вы должны использовать list-style-image для поддержки IE 7 или просто пусть IE 7 использует другой маркер. Вы можете использовать условные комментарии для целевого IE 7 и более ранних версий.

Ответ 4

Вы можете использовать фоновое изображение в LI

Один из возможных примеров
http://css.maxdesign.com.au/listamatic/vertical05.htm

Ответ 5

Существует ограниченное количество доступных опций для list-style-type, которые определены в спецификации CSS2.

Вы можете использовать:

диск
круг
квадрат
десятичное
десятичное ведущий нуля
низший романский
верхний романский
нижний греческий
ниже латынь
Верхняя латынь
армянин
грузинский
нижний-альфа
верхний-альфа
ни один

Если вы хотите что-то нестандартное, используйте свойство list-style-image

Если вы разрабатываете браузеры, поддерживающие сгенерированный контент, вы можете использовать:

li:before {
  content: '\[utf-8 hex code for character]';
  position: absolute;
  right: 100%;
}

li {
  position: relative;
}

Ответ 6

Вместо li:before, который влияет на все li (в меню, вкладки, аккордеон) на странице, я использовал это:

ul {
	list-style: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAHCAMAAAAYuxziAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABhQTFRF////cmpmZmZm+MGYqNP/Zmt/06N6j7j/ImXnGgAAABpJREFUeNpiYAABZkZWFgY2JiZ2CAsVAAQYAAPiACwnaqqBAAAAAElFTkSuQmCC');
}

  
<ul>
  <li>This is my middot</li>
</ul>