Пользовательский символ маркера для <li>элементов в <ul>, который является обычным символом, а не изображением

Question

Я понимаю, что можно указать пользовательский рисунок в качестве заменяющего маркера, используя атрибут CSS:

list-style-image

А затем присвоить ему URL.

Однако в моем случае я просто хочу использовать символ «+». Я не хочу создавать для этого графику, а затем указывать на нее. Я бы просто поручил неупорядоченному списку использовать символ плюса в качестве символа маркера.

Можно ли это сделать, или я вынужден сначала сделать его графическим?

Answer 1

Это поздний ответ, но я только что натолкнулся на это ... Чтобы исправить отступы на любых переносимых строках, попробуйте это так:

ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

li {
  padding-left: 1em;
  text-indent: -1em;
}

li:before {
  content: "+";
  padding-right: 5px;
}

Answer 2

Следующее цитируется из Списки укрощения :

Могут быть случаи, когда у вас есть список, но вам не нужны маркеры, или вы хотите использовать какой-то другой символ вместо маркера. Опять же, CSS предоставляет простое решение. Просто добавьте стиль списка: нет; к вашему правилу и заставить LI отображать с висячими отступами. Правило будет выглядеть примерно так:

ul {
   list-style: none;
   margin-left: 0;
   padding-left: 1em;
   text-indent: -1em;
}

Либо для отступа, либо для поля должно быть установлено ноль, а для другого - 1em. В зависимости от выбранного вами «маркера» вам может потребоваться изменить это значение. Отрицательный отступ текста приводит к тому, что первая строка перемещается влево на эту величину, создавая висячий отступ.

HTML будет содержать наш стандартный UL, но с любым символом или объектом HTML, который вы хотите использовать вместо маркера, предшествующего содержимому элемента списка. В нашем случае мы будем использовать », правильная двойная угловая кавычка:».

»Пункт 1
»Пункт 2
»Пункт 3
»Пункт 4
»Пункт 5 мы сделаем
немного дольше, чтобы
это обернет

Answer 3

Так много решений.
Но я все еще думаю, что есть возможности для улучшения.

Преимущества:

• очень компактный код
• работает с любым размером шрифта
  (без абсолютных значений в пикселях)
• идеально выравнивает строки
  (без небольшого смещения между первой и следующей строками)

ul {
	position: relative;
	list-style: none;
	margin-left: 0;
	padding-left: 1.2em;
}
ul li:before {
	content: "+";
	position: absolute;
	left: 0;
}

<ul>
  <li>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id orci porta dapibus.</li>
  <li>Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</li>
</ul>

Answer 4

Это решение W3C.На данный момент это работает по крайней мере в Firefox.

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

http://dev.w3.org/csswg/css-lists/#marker-content

Answer 5

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

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

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

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

Answer 6

Вы можете использовать псевдоселектор :before для вставки содержимого перед элементом списка. Вы можете найти пример на Quirksmode, на http://www.quirksmode.org/css/beforeafter.html. Я использую это для вставки гигантских кавычек вокруг кавычек ...

НТН.

Answer 7

Мое решение использует позиционирование, чтобы автоматически получать правильные линии. Так что вам не нужно беспокоиться о настройке padding-right для li: before.

ul {
  margin-left: 0;
  padding-left: 0;
  list-style-type: none;
}

ul li {
  position: relative;
  margin-left: 1em;
}

ul li:before {
  position: absolute;
  left: -1em;
  content: "+";
}

<ul>
  <li>Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Answer 8

Font-awesome предлагает отличное решение из коробки:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />

<ul class='fa-ul'>
  <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
  <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
</ul>

Answer 9

Желательно определить стиль <li>, чтобы он не влиял на <ol> элементы списка.Итак:

ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

ul li {
    padding-left: 1em;
    text-indent: -1em;
}

ul li:before {
    content: "+";
    padding-right: 5px;
}

Answer 10

.list-dash li, .list-bullet li {
    position: relative;
    list-style-type: none; /* disc circle(hollow) square none */
    text-indent: -2em;
}
.list-dash li:before {
    content: '—  '; /* em dash */
}
.list-bullet li:before {
    content: '• '; /*copy and paste a bullet from HTML in browser into CSS (not using ASCII codes) */
}

<ul class="list-dash">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>