Li Item on Two Lines. Second Line Has No Margin

How to keep indent for second line in ordered lists via CSS?

Update

This answer is outdated. You can do this a lot more simply, as pointed out in another answer below:

ul {
  list-style-position: outside;
}

See https://www.w3schools.com/cssref/pr_list-style-position.asp

Original Answer

I'm surprised to see this hasn't been solved yet. You can make use of the browser's table layout algorithm (without using tables) like this:

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

ol > li {
    counter-increment: foo;
    display: table-row;
}

ol > li::before {
    content: counter(foo) ".";
    display: table-cell; /* aha! */
    text-align: right;
}

Demo: http://jsfiddle.net/4rnNK/1/

Sample Image

To make it work in IE8, use the legacy :before notation with one colon.

Li item on two lines. Second line has no margin

This is because the tick is inline content so when the text wraps it will continue to flow as usual.

You can stop this behaviour by taking advantage of text-indent:

The text-indent property specifies how much horizontal space should be left before the beginning of the first line of the text content of an element.

text-indent (https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent)

By supplying a negative text-indent you can tell the first line to shift a desired amount to the left. If you then specify a positive padding-left you can cancel this offset out.

In the following example a value of 1.28571429em is used because it is the width set on the .fa-fw by font-awesome.

ul {  width: 300px;}li {    padding-left: 1.28571429em;    text-indent: -1.28571429em;}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/><ul class="fa-ul custom-list">    <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>    <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>    <li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li></ul>

Second line in li starts under the bullet after CSS-reset

The li tag has a property called list-style-position. This makes your bullets inside or outside the list. On default, it’s set to inside. That makes your text wrap around it. If you set it to outside, the text of your li tags will be aligned.

The downside of that is that your bullets won't be aligned with the text outside the ul. If you want to align it with the other text you can use a margin.

ul li {
    /*
     * We want the bullets outside of the list,
     * so the text is aligned. Now the actual bullet
     * is outside of the list’s container
     */
    list-style-position: outside;

    /*
     * Because the bullet is outside of the list’s
     * container, indent the list entirely
     */
    margin-left: 1em;
}

Edit 15th of March, 2014
Seeing people are still coming in from Google, I felt like the original answer could use some improvement

Changed the code block to provide just the solution
Changed the indentation unit to em’s
Each property is applied to the ul element
Good comments :)

Text, when is in new line, has no left padding

There are more ways, for example set padding to whole LI and position: absolute to counter (:before pseudoelement).

.listPo {
    list-style: none;
    counter-reset: item;
    padding-left: 0.2em;
}
.listPo>li {
  counter-increment: item;
  margin-bottom: 8px;
  font-size: 15px;
  padding-left: calc(1.5em + 10px);
  position: relative;
}
.listPo>li:before {
  margin-right: 10px;
  content: counter(item);
  background: #0e4b78;
  color: white;
  width: 1.5em;
  text-align: center;
  display: inline-block;
  padding-left: 1px;
  padding-right: 2px;
  position: absolute;
  top: 0; 
  left: 0;
}

<ol class="listPo">
   <li>
      <a href="h#">
      gfsdgsdfgsdf
      </a>
      ,Chemica ActLi Item on Two Lines. Second Line Has No MarginLi Item on Two Lines. Second Line Has No MarginLi Item on Two Lines. Second Line Has No MarginLi Item on Two Lines. Second Line Has No MarginLi Item on Two Lines. Second Line Has No MarginLi Item on Two Lines. Second Line Has No MarginLi Item on Two Lines. Second Line Has No MarginLi Item on Two Lines. Second Line Has No MarginLi Item on Two Lines. Second Line Has No MarginLi Item on Two Lines. Second Line Has No MarginLi Item on Two Lines. Second Line Has No Marginaaaaa
   </li>
   <li>
      <a href="h#">
      gfsdgsdfgsdf
      </a>
      ,Chemica ActLi Item on Two Lines. Second Line Has No MarginLi Item on Two Lines. Second Line Has No MarginLi Item on Two Lines. Second Line Has No MarginLi Item on Two Lines. Second Line Has No MarginLi Item on Two Lines. Second Line Has No MarginLi Item on Two Lines. Second Line Has No MarginLi Item on Two Lines. Second Line Has No MarginLi Item on Two Lines. Second Line Has No MarginLi Item on Two Lines. Second Line Has No MarginLi Item on Two Lines. Second Line Has No MarginLi Item on Two Lines. Second Line Has No Marginaaaaa
   </li>
</ol>

Make second line of text text align under first line of text

Use flexbox

.block{
  display:flex;
}
.mr-5{
  margin-right:5px;
}

<div class="block">
    <span class="mr-5">-</span> 
    <span>The fund or the employer gave a housing loan to the member and the member owes money on the loan. The fund or the employer gave a housing loan to the member and the member owes money on the loan.The fund or the employer gave a housing loan to the member and the member owes money on the loan.</span>
  </div>

Indenting entire list items after using ::before to create bullets

You can play around with negative margin to get the effect you want to, please see the example below.

ul {  list-style-type: none;  }li::before {  content: "•";  margin-right: 5px;  color: #821019;  font-weight: 700;}
ul.with-margin {  margin-left: 10px; }
.with-margin li::before {  margin-left: -10px;}

<ul>  <li>Looooooooooooong text is very long, like it might even be multiple rows and that kills the custom style of your list items</li>  <li>Looooooooooooong text is very long, like it might even be multiple rows and that kills the custom style of your list items</li>  <li>Looooooooooooong text is very long, like it might even be multiple rows and that kills the custom style of your list items</li>  <li>Looooooooooooong text is very long, like it might even be multiple rows and that kills the custom style of your list items</li></ul>
<ul class="with-margin">  <li>Looooooooooooong text is very long, like it might even be multiple rows and that kills the custom style of your list items</li>  <li>Looooooooooooong text is very long, like it might even be multiple rows and that kills the custom style of your list items</li>  <li>Looooooooooooong text is very long, like it might even be multiple rows and that kills the custom style of your list items</li>  <li>Looooooooooooong text is very long, like it might even be multiple rows and that kills the custom style of your list items</li></ul>