Padding after linebreak with pseudo element

Question

I have a text that breaks to two lines which has a pseudo element ::before it. When broken to two lines the text does not align since it aligns with the pseudo element in the first row. Any Idea how to make the text align?enter image description here

Answer 1

Couple ways to get around this:

1. Create a div for the pseudoelement that is the 100% of the parent element, then use the next inline child div (height 100%) for the text.

2. Use position:absolute as seen here:

   li::before {
   position:absolute;
   top:0;
   left:0;
   padding-right: .3em;
   content: "\f00c";
   float: left;
   margin: 0 9px 0 0;
   

http://jsfiddle.net/1oauqvav/