279

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.

3
  • 93
    since dash is commonly used in lists why it's not included by default in css?
    – temirbek
    Oct 9, 2011 at 11:52
  • 127
    more importantly, why is there armenian numbering and katakana...but not dashes?
    – Henry C
    Dec 1, 2011 at 4:36
  • 10
    ul { list-style-type: '- '; } and ul { list-style: '- '; } seem both to work now. –– And yes, the proposed list-style-type: dash; should be implemented in the CSS-Standards. – Maybe in 2032. ;)
    – Avatar
    May 29, 2022 at 18:49

22 Answers 22

258

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

4
  • 14
    Works, but don't forget to put the list-style-type: none; to the <ul> element.
    – toesslab
    Feb 9, 2015 at 10:39
  • 7
    without indentation just ul li:before{ content:"- ";}
    – Qlimax
    May 19, 2015 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 E.
    Dec 11, 2015 at 0:35
  • What would be a HTML-only solution similar to the one you proposed?
    – pluton
    Feb 19, 2020 at 15:54
116

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.

4
  • 33
    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: alistapart.com/articles/taminglists
    – chiborg
    Nov 7, 2011 at 10:57
  • 4
    To place mdash in content use content: "\2014\a0"
    – Ivan Z
    Feb 18, 2016 at 20:03
  • See the answer of @three , which is more generic and less verbose!
    – Verbe
    Apr 19, 2020 at 0: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. Dec 18, 2020 at 1:33
90

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

4
  • 1
    great! i'd suggest 'ul.dash > li:before'. otherwise inner uls get messed up. Sep 15, 2015 at 9:19
  • 2
    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 E.
    Dec 11, 2015 at 0:33
  • I use this as a navigation .active class with li:before { visibility: hidden; } and li.active:before { visibility: visible; }
    – sshow
    Oct 2, 2017 at 12:17
  • Best suggestion imo!
    – Verbe
    Apr 19, 2020 at 0:26
78

In my case adding this code to CSS

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

was enough. Simple as it is.

4
  • 2
    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.
    – dontexist
    Nov 23, 2017 at 13:25
  • 1
    This is now also supported in Chrome (as of 79 I believe): chromestatus.com/feature/5893875400966144 and caniuse.com/#feat=mdn-css_properties_list-style-type_string
    – Alex
    Mar 25, 2020 at 5:28
  • 1
    Get this answer to the top!
    – Kevin
    Jun 5, 2022 at 10:06
  • I just noticed the space after “En dash” that is a nice and simple solution to the problem of dash being visually too close to the content beginning.
    – Vladan
    Jul 6, 2022 at 9:51
64

Use this:

ul
{
    list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}
4
  • 3
    Unfortunately, it's not respect css text's colors.
    – Hereblur
    Jul 9, 2013 at 5:19
  • 7
    The only possible solution for emails
    – Oleg
    Apr 10, 2014 at 11:01
  • Its not working for both Gmail(Nov 2018) and Outlook 2016 now. Nov 28, 2018 at 3:35
  • Great simple solution, any simple way to make the dash longer?
    – Aristides
    Jul 11, 2021 at 22:35
38
ul {
  list-style-type: none;
}

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

demo fiddle

0
33

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

1
  • IMHO its the best solution so far. Thx for sharing!
    – Axel
    Jul 23, 2018 at 20:58
21
ul {
  list-style-type: '-';
}

You can refer to MDN

11

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;
    }
  }
}
1
  • this is written in LESS/SASS. Feb 24, 2020 at 12:07
7
ul {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}
1
  • probably ``` ul { margin:0; list-style-type: none; } ul li:before { content: "- ";} ``` otherwise it affects ol lists as well
    – Sasha Bond
    Apr 6, 2017 at 16:22
6

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

Use list-style-type, which has 93% global support as of march 2023.

The list-style-type CSS property sets the marker (such as a disc, character, or custom counter style) of a list item element.

ul {
 list-style-type: "- "
}

Remember to add a single space after the -

enter image description here

References

  1. https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
  2. https://caniuse.com/?search=list-style-type%3Astring
4

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

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

list-style: "- "

0
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;
}`
3

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.

3

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;
}
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
  • 1
    this does not work for items that span more than one line
    – jenlampton
    Mar 16, 2018 at 21:25
3

You can just set li::marker like so:

li::marker {
   content: '- ';
}
1
3
  • When using symbols that do not exist on the keyboard, see HTML entities and use CSS code values for the list-style-type property. See the list of CSS codes at HTML Character Entity References for different symbols.
  • For symbols that are there on the keyboard, use the keyboard symbols directly as values to the list-style-type property.

See example code below:

<!-- See HTML entities for symbols NOT on the keyboard -->
<h3>HTML Entities: Long Rightwards Double Arrow</h3>
<ul style="list-style-type: '\27F9';">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<!-- Use symbols on the keyboard directly -->
<h3>Dash symbol on the keyboard</h3>
<ul style="list-style-type: '-';">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

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!

1
  • 9
    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.
    – mzgajner
    Jan 14, 2014 at 13:23
2

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>
2
  • Good thinking bro. Sep 13, 2021 at 14:06
  • exactly what i needed for inline styling of rss feed output, tx
    – Boshy
    Jan 30 at 16:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.