Тире в стиле списка HTML - PullRequest
Новая
       50

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

201 голосов
/ 08 июля 2010

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

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

Выведение: 

- abc

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

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

Ответы [ 17 ]

209 голосов
/ 21 марта 2012

Существует простое исправление (text-indent) для сохранения эффекта списка с отступом с помощью псевдокласса :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
100 голосов
/ 08 июля 2010

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

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

63 голосов
/ 23 апреля 2013

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

ul
{
    list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}
62 голосов
/ 12 мая 2013

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

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

Наслаждайся;)

27 голосов
/ 18 июня 2014 
ul {
  list-style-type: none;
}

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

демо скрипка

20 голосов
/ 25 января 2017

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

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

7 голосов
/ 14 марта 2017 
ul {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}
5 голосов
/ 10 января 2017

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

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

было достаточно. Просто, как есть.

5 голосов
/ 09 января 2013

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

Класс (modernizr) .generatedcontent на <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;
}
3 голосов
/ 27 июня 2015

CSS: 

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

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

HTML: 

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>
Страница:
...