Ответ 1

ИЗМЕНИТЬ

Я, вероятно, больше не рекомендую использовать изображения. Я придерживаюсь подхода использования символа Unicode, например:

li:before {
  content: "\2605";
}

OLD ANSWER

Я бы, вероятно, пошел за фоновым изображением, гораздо более эффективный универсальный и кросс-браузерный.

Вот пример:

<style type="text/css">
  ul {list-style:none;} /* you should use a css reset too... ;) */
  ul li {background:url(images/icon_star.gif) no-repeat 0 5px;}
</style>

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>

Ответ 2

Использование текста в виде пули

Используйте li:before с экранированным Hex HTML Entity (или любым простым текстом).

Пример

В моем примере будут создаваться списки с отметками в виде маркеров.

CSS

ul {
    list-style: none;
    padding: 0px;
}

ul li:before
{
    content: '\2713';
    margin: 0 1em;    /* any design */
}

Совместимость с браузером

Не тестировал себя, но он должен поддерживаться как IE8. По крайней мере, что quirksmode и css-tricks говорят.

Вы можете использовать условные комментарии для применения более старых/более медленных решений, таких как изображения или скрипты. Еще лучше, используйте оба изображения <noscript> для изображений.

HTML:

<!--[if lt IE 8]>
    *SCRIPT SOLUTION*
    <noscript>
        *IMAGE SOLUTION*
    </noscript>
<![endif]-->

О фоновых изображениях

Фоновые изображения действительно легко обрабатываются, но...

• Поддержка браузера background-size на самом деле только с IE9.
• Цвет текста HTML и специальные (сумасшедшие) шрифты могут делать много, с меньшим количеством HTTP-запросов.
• Решение script может просто ввести HTML-Entity, и пусть тот же CSS выполнит работу.
• Хороший сброс CSS-кода может облегчить list-style (более логичный выбор).

Enjoy.

Ответ 3

Вы можете его построить:

#modal-select-your-position li {
/* handle multiline */
    overflow: visible;
    padding-left: 17px;
    position: relative;
}

#modal-select-your-position li:before {
/* your own marker in content */
   content: "—";
   left: 0;
   position: absolute;
}

Ответ 4

Это решение W3C. Вы можете использовать его в 3012!

ul { list-style-type: "★"; }
/* Sets the marker to a "star" character */

https://drafts.csswg.org/css-lists/#text-markers

Ответ 5

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

Вот лучшее решение, которое я нашел до сих пор. Он отлично работает и кросс-браузер (IE 8+).

ul {
    list-style: none;
    padding-left: 1.2em;
    text-indent: -1.2em;
}

li:before {
    content: "►";
    display: block;
    float: left;
    width: 1.2em;
    color: #ff0000;
}

Важно иметь символ в плавающем блоке с фиксированной шириной, чтобы текст оставался выровненным, если он слишком длинный, чтобы вписаться в одну строку. 1.2em - это ширина, которую вы хотите для своего персонажа, измените ее для ваших нужд. Не забудьте reset отступы и поля для элементов ul и li.

РЕДАКТИРОВАТЬ: Помните, что размер "1.2em" может отличаться, если вы используете другой шрифт в ul и li: before. Безопаснее использовать пиксели.

Ответ 6

Чтобы добавить звезду, используйте символ Unicode 22C6.

Я добавил пространство, чтобы сделать небольшой пробел между li и звездой. Код для пространства A0.

li:before {
    content: '\22C6\A0';
}

Ответ 7

Более полный пример 222 answer:

ul {
    list-style:none;
    padding: 0 0 0 2em;     /* padding includes space for character and its margin */

    /* IE7 and lower use default */
    *list-style: disc;
    *padding: 0 0 0 1em;
}
ul li:before {
    content: '\25BA';
    font-family: "Courier New", courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
    margin: 0 1em 0 -1em;   /* right margin defines spacing between bullet and text. negative left margin pushes back to the edge of the parent <ul> */

    /* IE7 and lower use default */
    *content: none;
    *margin: 0;
}
ul li {
    text-indent: -1em;      /* negative text indent brings first line back inline with the others */

    /* IE7 and lower use default */
    *text-indent: 0;
}

Я включил свойства star-hack для восстановления стилей списка по умолчанию в старых версиях IE. Вы можете вытащить их и включить в условное обозначение, если это необходимо, или заменить на решение на основе фонового изображения. Мое скромное мнение заключается в том, что специальные стили пули, реализованные таким образом, должны грациозно деградировать на нескольких браузерах, которые не поддерживают псевдоселекторы.

Протестировано в Firefox, Chrome, Safari и IE8-10 и корректно отображает все.

Ответ 8

ul {
    list-style-type: none;    
}

ul li:before {
    content:'*'; /* Change this to unicode as needed*/
    width: 1em !important;
    margin-left: -1em;
    display: inline-block;
}

Ответ 9

Попробуйте этот код...

li:before {
    content: "→ "; /* caractère UTF-8 */
}

Ответ 10

Этот вопрос может быть старым, но здесь быстрое решение ul {list-style:outside none square;} или ul {list-style:outside none disc;} и т.д.

затем добавьте левое дополнение для элемента списка

ul li{line-height: 1.4;padding-bottom: 6px;}