HTML list-style-type dash

Question

Is there a way to create a list-style in HTML with a dash (i.e. - or – – or — —) i.e.

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

Outputting:

- abc

It's occurred to me to do this with something like li:before { content: "-" };, though I don't know the cons of that option (and would be much obliged for feedback).

More generically, I wouldn't mind knowing how to use generic characters for list items.

since dash is commonly used in lists why it's not included by default in css? — temirbek, Oct 09 '11 at 11:52
more importantly, why is there armenian numbering and katakana...but not dashes? — Henry C, Dec 01 '11 at 04:36

score 234 · Answer 1 · edited Dec 21 '15 at 15:31

234

There is an easy fix (text-indent) to keep the indented list effect with the :before pseudo class.

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

edited Dec 21 '15 at 15:31

MrMeszaros

531
7
14

answered Mar 21 '12 at 15:29

aron.lakatos

2,440
2
12
4

14
Works, but don't forget to put the `list-style-type: none;` to the `
– toesslab Feb 09 '15 at 10:39
7

without indentation just `ul li:before{ content:"- ";}` – Qlimax May 19 '15 at 15:47
5

I prefer to add `display: block; float: left;` to the `li:before` which can more easily pull it out of content flow, otherwise it's pretty hard/buggy to get the first and subsequent lines to line up correctly. Or Keyan Zhang's answer also does this with absolute positioning. – Simon East Dec 11 '15 at 00:35
13

pretty dumb that `list-style-type dash` isn't part of CSS already – Pixelomo May 17 '19 at 04:33
What would be a HTML-only solution similar to the one you proposed? – pluton Feb 19 '20 at 15:54
1

@Pixelomo also a bit racist, since some cultures don't even use bullet point lists at all and exclusively use dashes – Filip Skakun May 05 '20 at 23:37
@FilipSkakun I think calling it racist is a bit extreme, I don't think the W3C sat down and said "let's ignore countries who use dashes because we don't like them!" – Pixelomo May 06 '20 at 04:58
Probably not, which is why it's implicit racism. – zimdanen Apr 10 '21 at 16:06

score 113 · Accepted Answer · edited Dec 11 '15 at 00:42

113

You could use :before and content: bearing in mind that this is not supported in IE 7 or below. If you're OK with that then this is your best solution. See the Can I Use or QuirksMode CSS compatibility tables for full details.

A slightly nastier solution that should work in older browsers is to use an image for the bullet point and just make the image look like a dash. See the W3C list-style-image page for examples.

edited Dec 11 '15 at 00:42

Simon East

46,575
14
130
124

answered Jul 08 '10 at 02:10

Darko Z

35,598
15
76
105

29

The problem with `:before` is that when the list items spans several lines, the indent on the 2nd line starts where the dash is, thus ruining the indented list effect. You need to use hanging indents to avoid this. See this: http://www.alistapart.com/articles/taminglists/ – chiborg Nov 07 '11 at 10:57
4

To place mdash in `content` use `content: "\2014\a0"` – Ivan Z Feb 18 '16 at 20:03
See the answer of @three , which is more generic and less verbose! – Verbe Apr 19 '20 at 00:27
There is no code example shown in this answer, wonder why is this marked as the solution. IMHO the answer by @three is much better and should be accepted as the answer. – ranaalisaeed Dec 18 '20 at 01:33

velop · Answer 3 · 2015-09-16T11:56:02.247

79

Here's a version without any position relative or absolute and without text-indent:

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

Enjoy ;)

edited Sep 16 '15 at 11:56

answered May 12 '13 at 11:49

velop

2,479
1
18
28

1

great! i'd suggest 'ul.dash > li:before'. otherwise inner uls get messed up. – w.stoettinger Sep 15 '15 at 09:19
1

I prefer to add `display: block; float: left;` to the `li:before` which can more easily pull it out of content flow, otherwise it's pretty hard/buggy to get the first and subsequent lines to line up correctly. Or Keyan Zhang's answer also does this with absolute positioning. – Simon East Dec 11 '15 at 00:33
I use this as a navigation `.active` class with `li:before { visibility: hidden; }` and `li.active:before { visibility: visible; }` – sshow Oct 02 '17 at 12:17
Best suggestion imo! – Verbe Apr 19 '20 at 00:26

score 64 · Answer 4 · edited Dec 27 '16 at 10:45

64

Use this:

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

edited Dec 27 '16 at 10:45

Peter Mortensen

28,342
21
95
123

answered Apr 23 '13 at 17:58

Jase

830
6
5

3

Unfortunately, it's not respect css text's colors. – Hereblur Jul 09 '13 at 05:19
7

The only possible solution for emails – Oleg Apr 10 '14 at 11:01
Its not working for both Gmail(Nov 2018) and Outlook 2016 now. – user2875289 Nov 28 '18 at 03:35

score 36 · Answer 5 · edited Dec 05 '16 at 16:11

36

ul {
  list-style-type: none;
}

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

demo fiddle

edited Dec 05 '16 at 16:11

DᴀʀᴛʜVᴀᴅᴇʀ

4,253
12
46
84

answered Jun 18 '14 at 07:06

Keyan Zhang

461
4
5

score 32 · Answer 6 · edited Jul 23 '18 at 21:06

Let me add my version too, mostly for me to find my own preferred solution again:

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 its the best solution so far. Thx for sharing! – Axel Jul 23 '18 at 20:58 — Axel, Jul 23 '18 at 20:58

score 24 · Answer 7 · answered Jan 10 '17 at 19:21

24

In my case adding this code to CSS

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

was enough. Simple as it is.

answered Jan 10 '17 at 19:21

Albert Sosnowski

273
2
2

1

Assuming this is a relatively new addition to CSS since I can't find another answer that mentions it, but this really should be the accepted answer these days. – ahstro Nov 23 '17 at 13:25
4

This seems to only be supported in desktop Firefox: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type – dave Feb 01 '18 at 22:32
This is now also supported in Chrome (as of 79 I believe): https://www.chromestatus.com/feature/5893875400966144 and https://caniuse.com/#feat=mdn-css_properties_list-style-type_string – Alex Mar 25 '20 at 05:28

score 10 · Answer 8 · answered Jun 03 '19 at 07:17

10

One of the top answers did not work for me, because, after a little bit trial and error, the li:before also needed the css rule display:inline-block.

So this is a fully working answer for me:

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

answered Jun 03 '19 at 07:17

Joery

561
5
5

this is written in LESS/SASS. – Arslan Ameer Feb 24 '20 at 12:07

score 7 · Answer 9 · answered Mar 14 '17 at 18:41

7

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

answered Mar 14 '17 at 18:41

user3849374

127
1
3

probably ``` ul { margin:0; list-style-type: none; } ul li:before { content: "- ";} ``` otherwise it affects ol lists as well – Sasha Bond Apr 06 '17 at 16:22

score 6 · Answer 10 · edited Dec 05 '16 at 15:49

Here is my fiddle version:

The (modernizr) class .generatedcontent on <html> practically means IE8+ and every other sane browser.

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

score 5 · Answer 11 · answered Mar 07 '21 at 14:15

5

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

You can refer to MDN

answered Mar 07 '21 at 14:15

Brady Huang

1,079
12
19

score 4 · Answer 12 · answered Dec 11 '20 at 09:33

4

HTML

<ul>
  <li>One</li>
  <li>Very</li>
  <li>Simple</li>
  <li>Approach!</li>
</ul>

CSS

ul {
  list-style-type: none;
}

ul li:before {
  content: '-';
  position: absolute;
  margin-left: -20px;
}`

answered Dec 11 '20 at 09:33

Ritu Gupta

1,049
8
7

score 3 · Answer 13 · answered Jan 11 '13 at 15:37

My solution is in adding extra span tag with mdash in it:

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

and adding to css:

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

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

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

score 3 · Answer 14 · edited Apr 03 '14 at 09:31

3

Another way:

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

edited Apr 03 '14 at 09:31

Community

1
1

answered Feb 14 '14 at 05:40

imos

3,967
30
33

score 3 · Answer 15 · edited Dec 27 '16 at 10:46

3

CSS:

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

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

HTML:

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

edited Dec 27 '16 at 10:46

Peter Mortensen

28,342
21
95
123

answered Jun 27 '15 at 05:56

blackchestnut

1,050
9
15

1

this does not work for items that span more than one line – jenlampton Mar 16 '18 at 21:25

TNi · Answer 16 · 2010-07-08T02:21:02.340

I do not know if there is a better way, but you can create a custom bullet point graphic depicting a dash, and then let the browser know you want to use it in your list with the list-style-type property. An example on that page shows how to use a graphic as a bullet.

I have never tried to use :before in the way you have, although it may work. The downside is that it will not be supported by some older browsers. My gut reaction is that this is still important enough to take into consideration. In the future, this may not be as important.

EDIT: I have done a little testing with the OP's approach. In IE8, I couldn't get the technique to work, so it definitely is not yet cross-browser. Moreover, in Firefox and Chrome, setting list-style-type to none in conjunction appears to be ignored.

score 3 · Answer 17 · answered Dec 08 '17 at 11:05

3

For anyone having this problem today, the solution is simply:

list-style: "- "

answered Dec 08 '17 at 11:05

Bee Bat

49
1

score 2 · Answer 18 · edited Apr 23 '13 at 02:44

2

Instead of using lu li, used dl (definition list) and dd. <dd> can be defined using standard css style such as {color:blue;font-size:1em;} and use as marker whatever symbol you place after the html tag. It works like ul li, but allows you to use any symbol, you just have to indent it to get the indented list effect you normally get with ul li.

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

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

Gives you much cleaner code! That way, you could use any type of character as marker! Indent is of about -10px and it works perfect!

edited Apr 23 '13 at 02:44

Walery Strauch

5,317
7
45
53

answered Apr 23 '13 at 02:20

Carolyne Comtois

45
1

7

This is quite bad for two reasons. Firstly, you're putting your bullet characters directly in the text, mixing content and style. Secondly, you're misusing the dl element, here's an article on [correct use](http://html5doctor.com/the-dl-element/). – mzgajner Jan 14 '14 at 13:23

score 2 · Answer 19 · answered Feb 11 '21 at 09:34

2

You can just set li::marker like so:

li::marker {
   content: '- ';
}

answered Feb 11 '21 at 09:34

trashtatur

221
2
11

score -1 · Answer 20 · answered Mar 23 '18 at 15:58

-1

What worked for me was

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

answered Mar 23 '18 at 15:58

C oneil

117
1
4

HTML list-style-type dash

20 Answers20

Linked

Related