As great as CSS is, there are some glaring holes within the specification. We can perform calculations using the calc function in CSS, but for some reason there is no list-style-type: dash but other strange values like lower-greek and plenty of other language specific values.
The solution is quite simple and I decided to make this into a post for future reference and anyone else who finds themselves searching Google for the same thing.
ul.dashed {
list-style: none;
padding-left: 0;
}
ul.dashed > li {
margin-left: 15px;
}
/* Prevent nested li's from getting messed up */
ul.dashed > li::before {
content: "-";
margin-left: -15px;
}
You can replace the hyphen with anything you want, perhaps an emdash or endash? Maybe even an icon from an icon font. Go wild.