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

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

list-style-image

Затем укажите URL.

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

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

ОТВЕТЫ

Ответ 1

В Укрощение списков приводится следующее:

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

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

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

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

"Пункт 1
  " Пункт 2
   "Пункт 3
  " Пункт 4
  "Пункт 5 мы сделаем
      немного дольше, так что       он упакует

Ответ 2

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

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

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

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

Ответ 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>

Ответ 4

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

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

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

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

Ответ 6

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

НТН.

Ответ 7

Мое решение использует позиционирование, чтобы получить завернутые строки автоматически выстраиваются правильно. Поэтому вам не нужно беспокоиться о настройке дополнения - прямо на ли: раньше.

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>

Ответ 8

Желательно квалифицировать стиль <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;
}

Ответ 9

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>

Ответ 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>

Ответ 11

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

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

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

Ответ 12

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

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>

Ответ 13

Стиль 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*/
}

Ответ 14

попробуйте это

    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>