Aligning text on a specific character

Question

I have this list of words i want to align on the center, every list item consists of two words divided by a \'-\'(hyphen). Is there an easy way i can align spot on the hyphe

Answer 1

Demo fiddle

If you want to use some jQuery (for example, if you cant change your HTML), another alternative may be:

HTML

    
lopen - ik loop
    
klimmen - ik klim
    
geven - ik geef
    
schreeuwen - ik schreeuw
    
blozen - ik bloos

CSS

.progress-ww {
    font-size: 0.8rem;
    line-height:0.8rem;
    text-align:center;
}
.left {
    text-align:left;
}
.right {
    text-align:right;
}
.right:after {
    content:' -';
    margin-right:5px;
}
.left, .right {
    display:inline-block;
    width:50%;
}

jQuery

$('.progress-ww div').each(function () {
    var part = $(this).text().split(' - ')
    $(this).replaceWith("
" + part[0] + "
" + part[1] + "
");
});