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: #E5         


        

Answer 1

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;
  }

	
This is the first entry but only goes one line
	
This is the second entry but only goes one line
	
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.
	
This is the fourth entry but only goes one line
	
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.