Мені потрібно використовувати, наприклад, символ зірки (★) як кулю для елемента списку.

Я прочитав модуль CSS3: Списки , який описує, як використовувати нестандартний текст як кулі, але це не працює для мене. Я думаю, що браузери просто не підтримують ::markerпсевдоелемент.

Як я можу це зробити, не використовуючи зображення?

EDIT

Напевно, я б більше не рекомендував використовувати зображення. Я б дотримувався підходу використання символу 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зі шістнадцятковою 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;
}

Це рішення 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: раніше. Безпечніше використовувати пікселі.

Щоб додати зірку, використовуйте символ Unicode 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;
}

Я включив зіркові властивості для відновлення стилів списку за замовчуванням у старих версіях 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, тому я розміщую це як сумісне рішення CSS 2020, використовуючи кулю "вертикальний трикутник" як мій приклад.

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