title: How to indent the text in a custom unordered list
body: <p>Fiddle: <a href="http://jsfiddle.net/pgf0ckfj/1/" rel="nofollow">http://jsfiddle.net/pgf0ckfj/1/</a></p>
  
  <p>CSS:</p>
  
  <pre><code>ul {
      list-style: none;
      padding: 0 0 0 45px;
  }
  ul li:before {
      content: "♦ ";
      color: #E55302;
  }
  </code></pre>
  
  <p>As you can see the text is not indented like the normal <code>UL</code>.</p>
  
  <p>How can I modify the CSS to ensure the text is indented for anything overflowing to the next line.</p>