My goal is to have a dash instead of a bullet appear for unordered lists.

**HTML:**

```
<div>
   <ul>
      <li>Item 1: Lore ipsum lore ipsum lore ipsum...</li>
      <li>Item 2</li>
      <li>Item 3</li>
   </ul>
</div>

```

**CSS:**

```
div {
  width: 200px;
}

ul {
  list-style: none;
}

ul li:before {
  content: '-';  
  padding-right: 5px;
}

```

```css
div {
  width: 200px;
}

ul {
  list-style: none;
}

ul li:before {
  content: '-';  
  padding-right: 5px;
}
```

```html
<div>
<ul>
<li>Item 1: Lore ipsum lore ipsum lore ipsum...</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
```

**JSFIDDLE:**
<https://jsfiddle.net/kk10ogd4/>

The dash shows up as desired. BUT: There is no text indent like with the default bullet list style. As you can see in the fiddle, the text for the first list item consists of two lines and the second line starts right under the dash. How do I achieve that the second line starts right under the first letter of the first line and NOT under the dash of the first line (text indent issue)???