title: CSS to recreate LI with bullet, but without using a LI
body: <p>I'm trying to create a layout that looks like a LI with a bullet, but that doesn't use a LI. I can't use a LI because I want to allow different items in the same list to have different bullet images. And from what I can tell LI bullet styles can only be set in the UL, so all LI in the same UL must have the same bullet image... and I don't want that. Please correct me if I am wrong about how LI's can be styled.</p>
  
  <p>Here's the HTML that I'm trying to style so that it recreates a LI bullet.</p>
  
  <pre><code>&lt;div&gt;&lt;img src="..."/&gt;&lt;p&gt;Inbox:&lt;/p&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I'm not sure how best to achieve the following goals:</p>
  
  <ul>
  <li>Make bullet image display to the left of the item text box so that when there is lots of text the bullet hangs off in the left margin. The text shouldn't wrap under the bullet image.</li>
  <li>Keep the bullet image aligned middle with the first line of text (in the case of text wrapping). And keep the bullet middle aligned when the text changes size.</li>
  </ul>
  
  <p>My high level goal is to recreate <a href="http://www.hogbaysoftware.com/products/taskpaper" rel="nofollow noreferrer">TaskPaper's</a> UI in a web page:</p>
  
  <p>I'll be happy to give a free license to the person with the solution that I like best.</p>
  
  <p>Thanks,</p>
  
  <p>Jesse</p>