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.
maybe “::” instead of “:”
and maybe also the margin in “em” since “-” is a character.
Thanks Dwayne, you legend.
We missed 2018 comment but heres a 2019 for ya. You da man dwayne.
Works great! Thanks Dwayne.