wrap tag text up to certain character javascript

Question

I have an auto generated list in PHP.

How do I wrap a span tag around characters up to and including the dash? I want to be able to change the number and the dash with css. I want to target all of the list items.

Eg:
1-Item
2-Item
3-Item
  1-SubItem
  2-SubItem
4-Item

Answer 1

CSS:

ul {
    counter-reset: item;
}
li {
    display: block;
    margin-bottom: .5em;
    margin-left: 2em;
}
li:before {
    display: inline-block;
    content: counter(item) "- ";
    counter-increment: item;
    width: 2em;
    margin-left: -2em;
}

Check out the fiddle: https://jsfiddle.net/3oho2t7v/