Indent list line break with :before content

Question

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.

Answer 1

What you really need to do is use 'absolute' & 'relative'
and actually, I think avoid manipulating the list HTML

example:

<ul>
  <li>some text 1</li>
  <li>some text that breaks a line 2</li>
  <li>some text 3</li>
  <li>some text 4</li>
  <li>some text 5</li>
</ul>

<style>
ul {list-style: none; padding: 0; max-width: 100px;}
li {position: relative; padding: 0 0 0 20px;}
li:before {content: '//'; position: absolute; top: 0; left: 0;}
</style>