HTML list-style-тип тире

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

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

вывод:

- abc

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

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

180
css html html-lists xhtml

16 ответов

можно использовать :before и content: учитывая, что это не поддерживается в IE 7 и ниже. Если вы в порядке с этим, то это ваше лучшее решение. Вижу Могу Ли Я Использовать или QuirksMode таблицы совместимости CSS для полной информации.

немного неприятное решение, которое должно работать в старых браузерах, - использовать изображение для точки маркера и просто сделать изображение похожим на тире. Вижу консорциума W3C list-style-image страница для примера.

93

существует простое исправление (текстовый отступ), чтобы сохранить эффект отступа списка с :before псевдокласс.

ul {
  margin: 0;
}
ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "-";
  text-indent: -5px;
}
Some text
<ul class="dashed">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
Last text
191

используйте этот:

ul
{
    list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}
58

вот версия без какой-либо позиции относительной или абсолютной и без текстового отступа:

ul.dash {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
}
ul.dash > li:before {
    display: inline-block;
    content: "-";
    width: 1em;
    margin-left: -1em;
}

наслаждаться ;)

55
ul {
  list-style-type: none;
}

ul > li:before {
  content: "–"; /* en dash */
  position: absolute;
  margin-left: -1.1em; 
}

демо скрипка

24

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

ul {
  list-style-type: none;
  /*use padding to move list item from left to right*/
  padding-left: 1em;
}

ul li:before {
  content: "–";
  position: absolute;
  /*change margin to move dash around*/
  margin-left: -1em;
}
<!-- 
Just use the following CSS to turn your
common disc lists into a list-style-type: 'dash' 
Give credit and enjoy!
-->
Some text
<ul>
  <li>One</li>
  <li>Very</li>
  <li>Simple Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
  <li>Approach!</li>
</ul>

https://codepen.io/burningTyger/pen/dNzgrQ

6

в моем случае добавление этого кода в CSS

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

было достаточно. Все очень просто.

5
ul {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}
5

вот мой скрипка версия:

класс (modernizr).generatedcontent on <html> практически означает IE8+ и любой другой здравомыслящий браузер.

<html class="generatedcontent">
  <ul class="ul-dash hanging">
    <li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
    <li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
  </ul>

CSS:

.ul-dash {
  margin: 0;
}

.ul-dash {
  margin-left: 0em;
  padding-left: 1.5em;
}

.ul-dash.hanging > li { /* remove '>' for IE6 support */
  padding-left: 1em;
  text-indent: -1em;
}  

.generatedcontent .ul-dash {
  list-style: none;
}
.generatedcontent .ul-dash > li:before {
  content: "–";
  text-indent: 0;
  display: inline-block;
  width: 0;
  position: relative;
  left: -1.5em;
}
4

мое решение заключается в добавлении дополнительного тега 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;
}
3

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

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

EDIT: я провел небольшое тестирование с подходом OP. В IE8 я не мог заставить технику работать, поэтому она определенно еще не кросс-браузер. Кроме того, в Firefox и Chrome настройка типа списка в сочетании с none игнорируется.

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 и он работает идеально!

2

иначе:

li:before {
  content: '14a0a0'; /* em-dash followed by two non-breaking spaces*/
}
li {
  list-style: none;
  text-indent: -1.5em;
  padding-left: 1.5em;    
}
2

CSS:

li:before {
  content: '— ';
  margin-left: -20px;
}

li {
  margin-left: 20px;
  list-style: none;
}

HTML-код:

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>
2

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

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

0

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

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