Indent list line break with :before content

I have a list in which some items are quite long and therefore cause a line-break on small devices. Each list item needs the > symbol before it. I don't want to use an image (e.g. list-style-image). So therefore I use the :before selector right now, but theoretically I could also add it into the beginning of every list item.

Now to my problem. When the line break occurs, the breaking content doesn't align with the other content but starts right under the > symbol. I would like to have it aligned with the other content of course.

Here is my example code:

HTML:

<ul class="test">
    <li>Text Text Text</li>
    <li>Long Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</li>
    <li>Text Text Text</li>
</ul>

CSS:

.test {
    list-style: none;
    margin: 0;
    padding: 0;
}
.test li:before {
    content: ">";
    padding-right: 15px;
}

And I created a FIDDLE.

I'm afraid this might be a common question, but I didn't find any solution regarding this using the :before pseudo selector for an list item image.

Solution

you can achieve this by changing your markup a little;

<ul class="test">
    <li><div>&gt;</div><div class="one">Text Text Text</div></li>
    <li><div>&gt;</div><div class="one">Long Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div></li>
    <li><div>&gt;</div><div class="one">Text Text Text</div></li>

i.e the > and the text can be in separate divs and then you can apply the following styles:

.test {
    list-style: none;
    margin: 0;
    padding: 0;
}

li > div{
    display:inline-block;
    height:100%;
    //background:red;
    width:5%;
    vertical-align:top;
}

.one{
    width:95%;
}

see the fiddle:http://jsfiddle.net/SGz75/1/