Использование Текста В Качестве Пуль

использовать li:before с экранированной шестнадцатеричной HTML-сущностью (или любым обычным текстом).

---

пример

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

CSS:

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

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

---

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

не проверял себя, но он должен поддерживаться с IE8. По крайней мере, это то, что quirksmode & модели CSS-уловок, которые сказать.

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

EDIT: имейте в виду, что размер" 1.2 em " может отличаться, если вы используете другой шрифт в ul и li:before. Безопаснее использовать пиксели.

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

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

li:before {
    content: 'C6\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: 'BA';
    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;
}

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

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