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

222

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

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

Выведение:

- abc

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

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

html css xhtml html-lists Брайан М. Хант
источник

79

поскольку в списках часто используется тире, почему по умолчанию она не включена в css?

Темирбек

101

более важно, почему существует армянская нумерация и катакана ... но не тире?

Генри К

108

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

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

Darko Z
источник

27

Проблема в :beforeтом, что когда элементы списка занимают несколько строк, отступ во 2-й строке начинается там, где находится тире, тем самым разрушая эффект списка с отступом. Вы должны использовать висячие отступы, чтобы избежать этого. Смотрите это: alistapart.com/articles/taminglists

Чиборг

3

Чтобы contentиспользовать mdashcontent: "\2014\a0"

Ivan Z

Смотрите ответ @three, который является более общим и менее многословным!

Бен Вертонген

221

Существует простое исправление (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

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

aron.lakatos
источник

14

Работает, но не забудьте поставить list-style-type: none;к <ul>элементу.

toesslab

5

без отступов простоul li:before{ content:"- ";}

Qlimax

4

Я предпочитаю добавлять display: block; float: left;к тому, li:beforeчто легче вытащить его из потока контента, в противном случае довольно сложно / глючно получить правильные строки первой и последующих строк. Или ответ Кейана Чжана также делает это с абсолютным позиционированием.

Саймон Ист

8

довольно глупо, что list-style-type dashуже не является частью CSS

Pixelomo

Каким будет решение только для HTML, похожее на предложенное вами?

Плутон

74

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

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

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

ворачиваются
источник

1

здорово! Я бы предложил 'ul.dash> li: before'. в противном случае внутренние ульи испортятся.

w.stoettinger

1

Я предпочитаю добавлять display: block; float: left;к тому, li:beforeчто легче вытащить его из потока контента, в противном случае довольно сложно / глючно получить правильные строки первой и последующих строк. Или ответ Кейана Чжана также делает это с абсолютным позиционированием.

Саймон Ист

Я использую это как .activeкласс навигации с li:before { visibility: hidden; }иli.active:before { visibility: visible; }

Sshow

Лучшее предложение IMO!

Бен Вертонген

64

Использовать это:

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

Jase
источник

3

К сожалению, это не относится к цветам текста CSS.

Hereblur

7

Единственно возможное решение для электронной почты

Олег

Теперь он не работает как для Gmail (ноябрь 2018), так и для Outlook 2016.

user2875289

33

ul {
  list-style-type: none;
}

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

демонстрационная скрипка

Кейан Чжан
источник

25

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

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

три
источник

ИМХО, пока это лучшее решение. Спасибо за обмен!

Аксель

15

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

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

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

Альберт Сосновский
источник

1

Предполагая, что это относительно новое дополнение к CSS, так как я не могу найти другой ответ, который упоминает его, но это действительно должен быть принятый ответ в наши дни.

Ахстро

4

Это , кажется, поддерживается только в настольном браузере Firefox: developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

Дэйва

Это теперь также поддерживается в Chrome (как из 79 я считаю): chromestatus.com/feature/5893875400966144 и caniuse.com/#feat=mdn-css_properties_list-style-type_string

Alex

9

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

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

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

Joery
источник

это написано в LESS / SASS.

Арслан Амир

7

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

user3849374
источник

вероятно `` `ul {margin: 0; list-style-type: нет; } ul li: before {content: "-";} `` `в противном случае это также влияет на списки ol

Саша Бонд

5

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

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

biziclop
источник

3

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

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

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

TNI
источник

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

Виктор Стагуров
источник

3

По-другому:

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

ИМОС
источник

3

CSS:

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

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

HTML:

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

blackchestnut
источник

1

это не работает для предметов, которые занимают более одной строки

Дженламптон

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

Кэролайн Комтуа
источник

7

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

mzgajner

1

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

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

Пчела летучая мышь
источник

-1

Что сработало для меня

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

С одной стороны
источник

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

Ответы: