Тире в стилі списку HTML

222

Чи є спосіб створити стиль списку в HTML з тире (тобто - або - –або - —), тобто

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

Виведення:

- abc

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

Більш загально, я не заперечував би, як знати загальні символи для елементів списку.

— Брайан М. Хант
джерело

79

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

— temirbek

101

Що ще важливіше, чому там армійська нумерація і катакана ... але не тире?

— Генрі С

108

Ви можете використовувати :beforeі content:маючи на увазі , що це не підтримується в IE 7 або нижче. Якщо з цим все гаразд, то це найкраще рішення. Перегляньте розділ Can I Use або QuirksMode відомості див. У таблицях сумісності CSS.

Трохи неприємне рішення, яке має працювати в старих браузерах, - використовувати зображення для точки кулі і просто зробити зображення схожим на тире. Див . Приклади на сторінці W3Clist-style-image .

— Darko Z
джерело

27

Проблема :beforeполягає в тому, що коли елементи списку охоплюють кілька рядків, відступ у другому рядку починається там, де є тире, тим самим руйнуючи ефект з відступом списку. Щоб уникнути цього, потрібно використовувати підвісні відступи. Дивіться це: alistapart.com/articles/taminglists

— chiborg

3

Щоб contentвикористовувати mdash у користуванніcontent: "\2014\a0"

— Іван Z

Дивіться відповідь @three, який є більш загальним і менш багатослівним!

— Бен Вертонхен

221

Існує просте виправлення (текстовий відступ) для збереження ефекту відрізного списку з :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: раніше". інакше внутрішні uls заплутаються.

— 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.

— Гереблур

7

Єдине можливе рішення для електронних листів

— Олег

Він не працює як для Gmail (листопад 2018), так і для Outlook 2016.

— користувач2875289

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

— три
джерело

IMHO - це найкраще рішення поки що. Thx для спільного використання!

— Аксель

14

У моєму випадку додавання цього коду до CSS

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

було достатньо Просто, як є.

— Альберт Сосновський
джерело

1

Якщо припустити, що це відносно нове доповнення до CSS, оскільки я не можу знайти іншої відповіді, яка згадує його, але це справді має бути прийнятою відповіддю в ці дні.

— ahstro

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: раніше також знадобилося відображення правила css: inline-block.

Отже, це цілком справна відповідь для мене:

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

— Джорі
джерело

це написано МЕНШЕ / САС.

— Арслан Амер

7

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

— користувач3849374
джерело

ймовірно `` `ul {margin: 0; список-стиль-тип: немає; } ul li: before {content: "-";} `` `інакше це вплине і на списки

— Саша Бонд

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

— бізиклоп
джерело

3

Я не знаю, чи є кращий спосіб, але ви можете створити власну графіку кулі, що зображує тире, а потім повідомте веб-переглядачу, що ви хочете використовувати його у своєму списку зі списком-тип-тип властивістю . Приклад на цій сторінці показує, як використовувати графіку як кулю.

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

EDIT: Я трохи провів тестування з підходом ОП. В IE8 я не міг змусити цю техніку працювати, тому це точно не є крос-браузером. Більше того, у Firefox та Chrome налаштування типу списку стилів до жодного спільно, схоже, ігнорується.

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

— imos
джерело

3

CSS:

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

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

HTML:

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

— чорний горіх
джерело

1

це не працює для предметів, що охоплюють більше одного рядка

— jenlampton

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>

— C oneil
джерело