Тире в стиле списка HTML

Question

Есть ли способ создать стиль списка в HTML с тире (т. Е. - или - – или & mdash; —), т. Е.

<ul>
  <li>abc</li>
</ul>

Выведение:

- abc

Мне пришло в голову сделать это с чем-то вроде li:before { content: "-" };, хотя я не знаю минусов этого варианта (и был бы очень благодарен за обратную связь).

В более общем смысле, я не прочь бы знать, как использовать универсальные символы для элементов списка.

Answer 1

Я не знаю, есть ли лучший способ, но вы можете создать пользовательский рисунок маркера с изображением тире, а затем сообщить браузеру, что вы хотите использовать его в своем списке с list-style-тип свойство.Пример на этой странице показывает, как использовать графику в качестве маркера.

Я никогда не пытался использовать: раньше так, как вы, хотя это может работать.Недостатком является то, что он не будет поддерживаться некоторыми старыми браузерами.Моя внутренняя реакция заключается в том, что это все еще достаточно важно, чтобы принять во внимание.В будущем это может быть не так важно.

РЕДАКТИРОВАТЬ: Я провел небольшое тестирование с подходом ОП.В IE8 я не мог заставить эту технику работать, поэтому она определенно не является кросс-браузерной.Более того, в Firefox и Chrome установка типа стиля списка на none вместе, кажется, игнорируется.

Answer 2

Вместо использования lu li используется dl (definition list) and dd.<dd> можно определить с использованием стандартного стиля CSS, такого как {color:blue;font-size:1em;}, и использовать в качестве маркера любой символ, который вы поместите после HTML-тега.Он работает как ul li, но позволяет вам использовать любой символ, вам просто нужно сделать отступ, чтобы получить эффект списка с отступами, который вы обычно получаете с ul li.

CSS:
dd{text-indent:-10px;}

HTML
<dl>
<dd>- One</dd>
<dd>- Two</dd>
<dd>- Three</dd></dl>

Дает вам намного более чистый код!Таким образом, вы можете использовать любой тип персонажа в качестве маркера!Отступ около -10px и работает отлично!

Answer 3

Мое решение заключается в добавлении дополнительного тега span с mdash:

<ul class="mdash-list">
    <li><span class="mdash-icon">&mdash;</span>ABC</li>
    <li><span class="mdash-icon">&mdash;</span>XYZ</li>
</ul>

и добавление к css:

ul.mdash-list 
{
    list-style:none;
}

ul.mdash-list  li
{
    position:relative;
}

ul.mdash-list li .mdash-icon
{
    position:absolute;
    left:-20px;
}

Answer 4

Один из лучших ответов у меня не сработал, потому что после небольшой проб и ошибок li: before также потребовалось отображение правила css: inline-block.

Так что это полностьюрабочий ответ для меня:

ul.dashes{
  list-style: none;
  padding-left: 2em;
  li{
    &:before{
      content: "-";
      text-indent: -2em;
      display: inline-block;
    }
  }
}

Answer 5

Другой способ:

li:before {
  content: '\2014\00a0\00a0'; /* em-dash followed by two non-breaking spaces*/
}
li {
  list-style: none;
  text-indent: -1.5em;
  padding-left: 1.5em;    
}

Answer 6

Для тех, у кого есть эта проблема сегодня, решение просто:

стиль списка: "-"

Answer 7

То, что сработало для меня, было

<ul>
    <li type= "none">  &ndash; line 1 </li>
    <li type= "none">  &ndash; line 2 </li>
    <li type= "none">  &ndash; line 3 </li>
</ul>