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

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

list-style-image

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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>

Это решение W3C. Работает в Firefox и Chrome.

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

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

ul { list-style-type: "🔔 "; }

  <ul><li>item</li></ul>

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

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

НТН.

Мое решение использует позиционирование для автоматического выравнивания обернутых строк. Так что вам не нужно беспокоиться о настройке 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>

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>

Желательно уточнить стиль, <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;
}

Стиль Em dash:

ul.emdash {
  list-style-type: none;
  list-style-position: inside;
  text-indent: -1.25em;
}
ul.emdash > li:before {
  content: "\2014\00A0"; /* em dash + space*/
}

Я предпочитаю использовать отрицательную маржу, это дает вам больше контроля

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

li:before {
  content: "*";
  display: inline;
  float: left;
  margin-left: -18px;
}

Интересно, что я не считаю, что какие-либо из опубликованных решений достаточно хороши, потому что они полагаются на тот факт, что используемый символ имеет ширину 1em, что не обязательно должно быть так (возможно, за исключением ответа Джона Магнолии, который, однако, использует поплавки, которые могут усложняю вещи другим способом). Вот моя попытка:

ul {
  list-style-type: none;
  margin-left: 0;
  padding-left: 30px; /* change 30px to anything */
  text-indent: -30px;
}
ul li:before {
  content: "xy";
  display: inline-block; 
  width: 30px;
  text-indent: 0;
  text-align: center; /* change this for different bullet position */
}

<ul>
  <li>Item 1</li>
  <li>Item 2</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>

Это имеет следующие преимущества (по сравнению с другими решениями):

1. Он не зависит от ширины символа, как вы видите в примере. Я использовал два символа, чтобы показать, что это работает даже с широкими пулями. Если вы попробуете это в других решениях, вы получите смещение текста (на самом деле он даже виден с символом * при более высоком масштабе).
2. Это дает вам полный контроль над пространством, используемым пулями . Вы можете заменить 30px чем угодно (даже 1em и т. Д.). Только не забыл поменять на всех трех местах.
3. Если дает вам полный контроль над расположением пули . Просто замените на то text-align: center;, что вам нравится. Например, вы можете попробовать color: red; text-align: right; padding-right: 5px; box-sizing: border-box; или, если вам не нравится играть с рамкой, просто вычтите отступ (5 пикселей) из ширины (т.е. ширина: 25 пикселей в этом примере). Вариантов много.
4. Он не использует поплавки, поэтому его можно содержать где угодно.

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

попробуй это

    ul.a {
        list-style-type: circle;
    }
    
    ul.b {
        list-style-type: square;
    }
    
    ol.c {
        list-style-type: upper-roman;
    }
    
    ol.d {
        list-style-type: lower-alpha;
    }
    

<!DOCTYPE html>
    <html>
    <head>
    
    </head>
    <body>
    
    <p>Example of unordered lists:</p>
    <ul class="a">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <ul class="b">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <p>Example of ordered lists:</p>
    <ol class="c">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    
    <ol class="d">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    
    </body>
    </html>