Как использовать символ галочки / галочки (✓) вместо маркеров в неупорядоченном списке?

85

У меня есть список, в который я хочу добавить символ галочки перед текстом списка. Есть ли какой-нибудь CSS, который может помочь мне применить этот способ?

✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text

Примечание: я хочу это в HTML-коде этого типа

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

Развернуть фрагмент

css html special-characters

— Герой-переполнение стека
источник

150

Вы можете использовать псевдоэлемент для вставки этого символа перед каждым элементом списка:

ul {
  list-style: none;
}

ul li:before {
  content: '✓';
}

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

Развернуть фрагмент

— Джош Крозье
источник

Я использовал это, и он работает в Chrome 65. Я смог обернуть каждый <li>, как правило, используя сплошную границу 1px, плавающую влево и поле вправо на ul li: before - вы можете установить цвет границы для фона вашего элемента.

— ymasood

Спасибо за решение! Я добавил примечание, что отступы теряются при переносе. (Приносим извинения за редактирование сообщения, но это было лучше проиллюстрировать проблему, чем просто оставить комментарий, и, надеюсь, мы сможем с этим справиться.)

— Дэн Даскалеску

@ Джош: В ответе Адама есть решение проблемы упаковки. Я отредактировал его для ясности, чтобы вы могли включить его.

— Дэн Даскалеску

35

Вот три разных стиля галочки, которые вы можете использовать:

ul:first-child  li:before { content:"\2713\0020"; }  /* OR */
ul:nth-child(2) li:before { content:"\2714\0020"; }  /* OR */
ul:last-child   li:before { content:"\2611\0020"; }
ul { list-style-type: none; }

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

<ul><!-- not working on Stack snippet; check fiddle demo -->
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

Развернуть фрагмент

jsFiddle

Рекомендации:

— Майкл Бенджамин
источник

Это ничем не отличается от ответа Джоша Крозьера и страдает той же проблемой уничтожения отступов при упаковке . Кроме того, последний символ не отображается ни в скрипке, ни в Chromium / Ubuntu, но в любом случае это не относится к делу - ответ Джоша - это суть решения. Какие символы галочки использовать - это выбор дизайна.

— Дэн Даскалеску

1

@DanDascalescu, этот ответ расширяет решение Джоша Крозьера, предоставляя варианты галочки, о которых некоторые люди могут не знать. Это ценная информация. Тот факт, что это «выбор дизайна», не делает этот ответ менее полезным. На мой взгляд, ваш отрицательный голос неоправдан, так как: (1) ответ был полезен для многих людей (и получил почти 30 положительных голосов), (2) ответ не претендует на ничто иное, как выбор стиля, и (3) я не пытался решать какие-либо другие проблемы (которые, как вы говорите, «в любом случае не имеют отношения к

— Майкл Бенджамин

1

Я вижу варианты выбора галочки «\ 2713» и «\ 2714» - это необработанные кодовые точки Unicode. Я не вижу, как они выглядят. Если в ответе содержится выбор стиля, он может включать некоторые фактические отметки: ✓, ✔, ☑, ✅. Какую галочку использовать, вопрос не интересный. Как использовать галочки есть. Я вижу это как «Как мне нарисовать лодку, которая сейчас находится в воде», или «Какие оттенки синего я могу нарисовать». Имеет ли это смысл?

— Дэн Даскалеску

Вы имеете право смотреть на этот ответ с любой точки зрения. Я не собираюсь спорить с вашим мнением. Однако факт в том, что подавляющее большинство людей, посещающих этот пост, находят этот ответ полезным. Я просто оставлю это как есть. Спасибо за ответ. @DanDascalescu

— Майкл Бенджамин

2

Люди голосуют за по разным причинам. Люди голосуют по причинам, отличным от вашей. Вы не согласны с содержанием этого ответа. Вы не говорите, что ответ неправильный или устаревший (как в ссылках, на которые вы ссылались), вам просто это не нравится. Я не против. Вы имеете право на свое мнение.

— Майкл Бенджамин

25

В качестве дополнения к раствору:

ul li:before {
 content: '✓'; 
}

В качестве содержимого можно использовать любой значок SVG , например Font Aswesome .

ul {
  list-style: none;
  padding-left: 0;
}
li {
  position: relative;
  padding-left: 1.5em;  /* space to preserve indentation on wrap */
}
li:before {
  content: '';  /* placeholder for the SVG */
  position: absolute;
  left: 0;  /* place the SVG at the start of the padding */
  width: 1em;
  height: 1em;
  background: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg width='18' height='18' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'><path d='M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z'/></svg>") no-repeat;
}

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>This is my text, it's pretty long so it needs to wrap. Note that wrapping preserves the indentation that bullets had!</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

Развернуть фрагмент

Примечание: чтобы решить проблему упаковки, которая была у других ответов:

мы резервируем 1,5 м места слева от каждого <li>
затем поместите SVG в начало этого пространства ( position: absolute; left: 0)

Вот еще несколько черных иконок Font Awesome .

Проверьте этот КОДЕПЕН, чтобы узнать, как можно добавлять цвета и изменять их размер.

— Адам Орлов
источник

8

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

вы можете использовать этот простой стиль css

ul {
     list-style-type: '\2713';
   }

— Хитендра Сингх Шекхават
источник

Ответ Адама затронул проблему упаковки, но потребовалось много дополнительного кода ... это просто работает. Для меня интервал был непростой задачей, поэтому я просто добавил лишний \ 1 \ 1 в его конце, чтобы поставить галочку подальше от <li>.

— Джейден Баптиста