How to Create a List With Dashes in HTML

Solutions with HTML and CSS

If you want to have an unordered list styled with dashes instead of bullets, you can use the CSS :before pseudo-element with the content property.

Example of creating an unordered list with dashes:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul {
        list-style-type: none;
        color:#999999;
      }
      ul li:before {
        content: '\2014';
        position: absolute;
        margin-left: -20px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
    </ul>
  </body>
</html>

Try it Yourself »

Result

<div class="demo px-5 mt-1 mb-5 not-prose">- Lorem Ipsum

Lorem Ipsum
Lorem Ipsum

</div>In the example above, we set the list-style-type property of the <ul> element to “none”. Also, we added the position and margin-left properties to the <li> elements.

Note that when the items span several lines, the indent of the next line starts when the dash is. If you want to fix it, try the example below, where we keep the indented list effect.

Example of creating an unordered list having an indented list effect with dashes:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul {
        margin: 0;
      }
      ul.dashed {
        list-style-type: none;
      }
      ul.dashed > li {
        text-indent: -20px;
      }
      ul.dashed > li:before {
        content: "-";
        text-indent: -20px;
      }
    </style>
  </head>
  <body>
    <h2> List with dashes</h2>
    <ul class="dashed">
      <li>Text 1</li>
      <li>Text 2</li>
      <li>Text 3</li>
    </ul>
    <h2> List with bullets</h2>
    <ul>
      <li>Text 1</li>
      <li>Text 2</li>
      <li>Text 3</li>
    </ul>
  </body>
</html>

Try it Yourself »

Here, we used the text-indent property to have an indented list effect.