Unordered List Style Using Dash/Hyphen

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.