Something like this should do it.

$( li ).each(function() {
  $(this).html($(this).text().replace(/-.*$/,  <span class="after">$&</span> ));
});

It looks like you are trying to create some sort of descriptive list instead of a simple unordered list. If you need to keep all the text within a single element I m sure someone will post a decent solution, but why not use a dl instead of a ul like so:

 <dl>
      <dt>Some list text</dt>
      <dd>- additional text</dd>
 <dl>

This should achieve the same effect as trying to cause the text after a "-" sign to appear on a new line, and you can modify the padding and margin on the <dt> and <dl> elements so that they line up if that is the look you are going for. If you are creating a descriptive list with list items (<dt>) with further sub list items describing them (<dd>) its better to imply that in the semantics for accessibility than to approximate the same thing using another method.

EDIT: Before anyone says anything I am aware that the question asked for a solution using jQuery, and that this solution doesn t use jQuery. But if the intent here is to approximate a descriptive list it s better to code that semantically in the HTML than use jQuery magic.

This will insert a linebreak before every - in a list item.

$(function(){
  $("li").each(function(){
    $(this).html($(this).html().replace(-, "<br />-"));
  });
});

Sounds like you re on track. Make the span a block-level element like so:

<span class= after  style= display: block; >...</span>

And see if that does it.

Oh, and then move that inline style into your stylesheet :)

Something like this below should do it, note this was dry-coded here in my browser, so testing is required.

$( ul li ).each(function() {
    var parts = $(this).html().split( - , 1);

    $(this).html(parts[0]);
    if (parts.length == 2) {
        $(this).append(" - " + parts[1]);
    }    
});

$.each($("li:contains( - )"),function(i,n){
  n.innerHTML = n.innerHTML.replace( - , <span class="after">- )+"</span>"
});