How to indent the text in a custom unordered list

Question

Fiddle: http://jsfiddle.net/pgf0ckfj/1/

CSS:

ul {
    list-style: none;
    padding: 0 0 0 45px;
}
ul li:before {
    content: "♦ ";
    color: #E55302;
}

As you can see the text is not indented like the normal UL.

How can I modify the CSS to ensure the text is indented for anything overflowing to the next line.

Answer 1

Add text-indent attribute.

ul {
  text-indent: -20px;
  /* add text-indent */
  list-style: none;
}
ul li:before {
  content: "♦ ";
  color: #E55302;
}

<ul>
  <li>This is the first entry but only goes one line</li>
  <li>This is the second entry but only goes one line</li>
  <li>This is the third entry but it can go many many many lines and sometimes even a whole paragraph and I would like the text to be indented from the bullet.</li>
  <li>This is the fourth entry but only goes one line</li>
  <li>This is the third entry but it can go many many many lines and sometimes even a whole paragraph and I would like the text to be indented from the bullet.</li>
</ul>

Answer 2

Set the li to position: relative; and then your pseudo element to position: absolute; along with a negative left value. Adding relative positioning will make sure that your absolute positioned pseudo element will position itself based on the location and size of the li.

ul {
    list-style: none;
    padding: 0 0 0 45px;
}
ul li:before {
    content: "♦";
    color: #E55302;
    position: absolute;
    left: -15px;
}
li {
  position: relative;
  }

<ul>
	<li>This is the first entry but only goes one line</li>
	<li>This is the second entry but only goes one line</li>
	<li>This is the third entry but it can go many many many lines and sometimes even a whole paragraph and I would like the text to be indented from the bullet.</li>
	<li>This is the fourth entry but only goes one line</li>
	<li>This is the third entry but it can go many many many lines and sometimes even a whole paragraph and I would like the text to be indented from the bullet.</li>
</ul>