Символ Юникода как маркер для элемента списка в CSS


114

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

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

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


вы можете разместить код, который используете? И в каком браузере вы это тестируете?
Джонни Хейнс

1
stackoverflow.com/questions/3068199/… имеет несколько маркеров Unicode. На моем компьютере с Windows не отображается ни звездочка, которую вы видите выше, ни 26AB (средний черный кружок), хотя они подходят для Ubuntu.
Пит Киркхэм

Этот ответ (на аналогичный вопрос) решил это для меня: stackoverflow.com/a/12216973/907575
Петр Мигдал

Ответы:


77

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

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

47
Как это «намного эффективнее»? Вы отправляете дополнительный HTTP-запрос на выборку изображения, и общий размер файла увеличивается по мере загрузки изображения для чего-то, что можно было бы сделать просто с помощью одного символа Unicode.
Mathias Bynens

2
вы правы, вероятно, «эффективный» - это не то слово, которое я должен был использовать, если вы ищете производительность, но использование фона изображения, безусловно, гораздо более универсально, чем использование текста.
agbb

3
Не очень хорошо изменять размер изображения, но персонаж идеально подходит для любого размера, поэтому я бы сказал, что персонаж более универсален: PI Think Backword-совместимый или с самой широкой поддержкой браузера было бы словом ...
JustGoscha

Это не работает, когда <li>текст переносится: маркер не остается без отступа и в конечном итоге выглядит как начало абзаца текста. Этот ответ устраняет эту проблему: stackoverflow.com/a/14301918/1450294
Майкл Шепер,

105

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

Используйте 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(более логичный выбор).

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


1
полезный инструмент преобразования для экранирования специальных символов rishida.net/tools/conversion
iiz

23
Это не работает должным образом, если содержимое liэлемента переносится на несколько строк; эти обернутые строки не будут иметь правильный отступ.
Ричард Эв

5
float: left; margin-left: -12px;на: прежде чем позаботиться об этом, @RichardEverett
Дудо

1
Я работаю для одной строки, но не работаю, если несколько строк переносятся.
VDarricau

1
Работает только для однострочных списков. Множественные строки будут опускаться под маркером, а не отступать.
Clarus Dignus

35

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

#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
Это отличный метод, потому что, если вы не выполняете абсолютное позиционирование символа, то в конечном итоге вы получите «Bullet» на одной линии с остальной частью элемента списка. Это очень не пулевое поведение. Таким образом, с этим исправлением вы убираете «маркер» слева от элемента списка, как и с обычным маркером.
General Redneck

Спасибо тебе за это! Именно то, что мне нужно, чтобы мои пули снова начали вести себя.
tubaguy50035

1
Это делает замечательное дерево навигации с помощью '\21B3'! Спасибо! Это сработало лучше, чем другие ответы здесь. Также изменил padding-leftв моем дизайне на 1em, который хорошо адаптируется при изменении размера уровней вашего дерева.
ndm13

24

обновление: в комментариях Горге говорит: «Это работает в 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


12
Я слышал, что в 3012 Internet Explorer наконец-то заработал!
Марк К. Коуэн,

2
Это работает в Firefox 48, но не в Chromium 51 или на моем телефоне / планшете. Придется использовать li:beforeраствор.
CoderGuy123

1
Работает. Добро пожаловать в будущее, дамы и господа.
Микко Охтамаа,

Спасибо за ответ из будущего, но в 2020 году это работает в Chrome, Firefox и Edge, но не в Safari.
Джордж,

12

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


Может быть, добавить "height: 1px" или аналогично li: before? Это гарантирует, что float не распространяется до следующего <li>, вызывая нежелательное вложение.
Алан Де Смет

Почему дисплей: блок; на li: раньше? это потому, что по умолчанию он встроенный, и вы не можете указать ширину?
Александр Солоник

6

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

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

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

4

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


text-indent: -1em;- важное свойство, если у вас есть элементы многострочного списка. Без него вторая и последующие строки совпадают с маркером, а не с предыдущей строкой.
Андрис

3
ul {
    list-style-type: none;    
}

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

1

Я просмотрел весь этот список, и на 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в качестве единицы измерения, чтобы избежать конфликта с размером шрифта



-1

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

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

ul li{line-height: 1.4;padding-bottom: 6px;}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.