Спеціальний символ кулі для елементів <li> в <ul>, що є регулярним символом, а не зображенням

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

list-style-image

А потім надавши йому URL.

Однак у моєму випадку я просто хочу використовувати символ "+". Мені не хочеться створювати для цього графіку, а потім вказувати на неї. Я скоріше просто доручу невпорядкованому списку використовувати символ плюс як символ кулі.

Чи можна це зробити чи я змушений спочатку зробити його графічним?

У списках приручення цитується наступне :

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

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 . Я використовую це для вставки гігантських цитат навколо блок-котирувань ...

HTH.

У моєму рішенні використовується позиціонування, щоб загорнуті лінії автоматично вирівнялися правильно. Таким чином, вам не доведеться турбуватися про те, як встановити накладки прямо на li: раніше.

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>

Доцільно кваліфікувати стилізацію, <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;
}

Шрифтове приготування забезпечує чудове рішення з коробки:

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

Стиль Em тире:

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

Цікаво, що я не маю на увазі, що жодне з розміщених рішень є досить хорошим, тому що вони покладаються на те, що використовуваний персонаж є шириною 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>

Це має ці переваги (порівняно з іншими рішеннями):

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>