Unordered List line break issue

Question

I have this unordered list like so:

HTML

• Lorem ipsum dolor sit Lorem ipsum dolor sit
• Lorem ipsum dolor sit
• Lorem ipsum dolor sit
• Lorem ipsum dolor sit

CSS

.custom-list {
width: 250px;
}
.custom-list ul {
margin-top: 25px;
padding: 0 27px;
}
.custom-list li {
list-style: none;
font-size: 0.875rem;
color: #959595;
text-align: left;
}
.custom-list li:before {
content: "•";
color: #cc2a41;
padding-right: 8px;
}

And if you notice the first li the text doesn't indent when the line breaks and goes bellow the red bullet. How can this be fixed in order to get the text align as a block? Thanks!

See Demo: http://jsfiddle.net/wLLCn/2/

Answer 1

Check below Code this will help you.

<p>
    Lorem ipsum dolor sit amet fugit error quae unde omnis aut aut, eos ut ratione omnis laudantium ab sit architecto nemo perspiciatis quasi doloremque voluptatem sunt ipsam ratione aperiam aperiam, aperiam error beatae voluptas aut doloremque eaque sit ut inventore ut omnis omnis, 
</p>

<ol>
    <li>
        omnis ab quasi voluptatem voluptatem consequuntur sed fugit beatae veritatis sed quae dolores iste quasi ipsam ipsam, perspiciatis sed inventore eaque totam inventore sed ut sit dolores perspiciatis inventore ipsa totam ipsam ipsam, 
    </li>
    <li>
        et consequuntur error totam quia ipsa odit aspernatur accusantium vitae ipsam ipsam, enim voluptatem eaque ratione vitae ipsam qui odit ratione enim ipsa ipsa natus quae laudantium quae rem 
    </li>
    <li>
        nemo ab ratione sunt sit rem magni sit fugit unde unde, inventore magni magni ab qui eos ab natus sunt nemo ab fugit
    </li>
    <li>
            omnis error rem enim ipsam ipsam, perspiciatis qui eos inventore laudantium vitae quasi voluptas eaque aut error vitae voluptatem consequuntur aspernatur consequuntur inventore fugit qui ipsa ipsa, quia 
    </li>
    <li>
        ipsa ipsam ipsam illo explicabo sit vitae vitae, qui doloremque quae aspernatur aperiam beatae ratione ut aperiam sed dicta qui ipsam ipsa voluptatem voluptatem, error ratione aut rem ipsa 
    </li>
    <li>
        omnis ab quasi voluptatem voluptatem consequuntur sed fugit beatae veritatis sed quae dolores iste quasi ipsam ipsam, perspiciatis sed inventore eaque totam inventore sed ut sit dolores perspiciatis inventore ipsa totam ipsam ipsam, 
    </li>
    <li>
        et consequuntur error totam quia ipsa odit aspernatur accusantium vitae ipsam ipsam, enim voluptatem eaque ratione vitae ipsam qui odit ratione enim ipsa ipsa natus quae laudantium quae rem 
    </li>
    <li>
        omnis ab quasi voluptatem voluptatem consequuntur sed fugit beatae veritatis sed quae dolores iste quasi ipsam ipsam, perspiciatis sed inventore eaque totam inventore sed ut sit dolores perspiciatis inventore ipsa totam ipsam ipsam, 
    </li>
    <li>
        et consequuntur error totam quia ipsa odit aspernatur accusantium vitae ipsam ipsam, enim voluptatem eaque ratione vitae ipsam qui odit ratione enim ipsa ipsa natus quae laudantium quae rem 
    </li>
    <li>
        omnis ab quasi voluptatem voluptatem consequuntur sed fugit beatae veritatis sed quae dolores iste quasi ipsam ipsam, perspiciatis sed inventore eaque totam inventore sed ut sit dolores perspiciatis inventore ipsa totam ipsam ipsam, 
    </li>
    <li>
        et consequuntur error totam quia ipsa odit aspernatur accusantium vitae ipsam ipsam, enim voluptatem eaque ratione vitae ipsam qui odit ratione enim ipsa ipsa natus quae laudantium quae rem 
    </li>
</ol>

CSS Code:

ol,li {
    margin: 0;
    padding: 0;
}

ol {
    counter-reset: foo;
    display: table;
}

li {
    list-style: none;
    counter-increment: foo;
    display: table-row;
}

li::before {
    content: counter(foo) ".";
    display: table-cell;
    text-align: right;
    padding-right: .3em;
}

http://jsfiddle.net/4rnNK/