Мне нужно использовать, например, звездочку (★) в качестве маркера для элемента списка.

Я прочитал модуль CSS3: Списки , в котором описывается, как использовать произвольный текст в качестве маркеров, но у меня он не работает. Думаю, браузеры просто не поддерживают ::markerпсевдоэлемент.

Как я могу это сделать, не используя изображения?

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

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

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

СТАРЫЙ ОТВЕТ

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

Вот пример:

<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>

Использование текста как маркеров

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

пример

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

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]-->

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

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

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

Наслаждаться.

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

#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;
}

обновление: в комментариях Горге говорит: «Это работает в Chrome, Firefox и Edge, но не в Safari».

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

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

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

Изображения не рекомендуются, так как они могут выглядеть пиксельными на некоторых устройствах (устройства 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 - это ширина, которую вы хотите для своего персонажа, измените ее по своему усмотрению . Не забудьте сбросить отступы и поля для элементов ul и li.

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

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

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

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

Более полный пример ответа 222 :

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, во всех случаях отображается правильно.

ul {
    list-style-type: none;    
}

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

Я просмотрел весь этот список, и на 2020 год есть частично правильные и частично неправильные элементы.

Я обнаружил, что отступ и смещение были самой большой проблемой при использовании UTF-8, поэтому я публикую это как совместимое с 2020 годом решение CSS, используя в качестве примера маркер «вертикальный треугольник».

ul {
    list-style: none;
    text-indent: -2em; // needs to be 1 + ( 2 x margin), and the result 'negative'
}

ul li:before {
    content: "\25B2";
    margin: 0 0.5em; // 0.5 x 2 = 1, + 1 offset to get the bullet back in the right spot
}

использовать emв качестве единицы измерения, чтобы избежать конфликта с размером шрифта

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

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

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

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

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