title: Formatting listview items color and text with CSS
body: <p>I would like to format my listview item like the picture below but I am horrible with CSS.  As you can see with my code below I have an image titled "menu_icon" but I don't want that and whenever I try to remove it the formatting goes crazy.  As you can see, I would also like to change the gear color to green and keep the text area on both sides white.  Thank you in advance =)</p>
  
  <p><img src="https://i.stack.imgur.com/OHjDT.jpg" alt="enter image description here"></p>
  
  <pre><code>&lt;html&gt;
     &lt;head&gt;
       &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
       &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"&gt;
       &lt;script src="http://code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
       &lt;script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"&gt;&lt;/script&gt;
     &lt;/head&gt;
  
     &lt;div data-role="page" id="page1"&gt;
          &lt;div data-role="header" data-position="fixed" data-tap-toggle="false"&gt;
               &lt;h1&gt;My page&lt;/h1&gt; 
          &lt;/div&gt;
  
          &lt;div role="main"  class="ui-content"&gt;
             &lt;ul data-role="listview" data-inset="true"&gt;
                &lt;li&gt;
                   &lt;a href="./menu_icon.png"&gt;&lt;/a&gt;
                   &lt;a href="#download" data-transition="pop" data-icon="gear"&gt;Download Browser&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                   &lt;a href="#"&gt;&lt;/a&gt;
                   &lt;a href="#download" data-transition="pop" data-icon="gear"&gt;Download Browser&lt;/a&gt;
                &lt;/li&gt;
             &lt;/ul&gt;
          &lt;/div&gt;
  
          &lt;div data-role="footer" data-position="fixed" data-tap-toggle="false"&gt;
             &lt;h1&gt;My page footer&lt;/h1&gt;
          &lt;/div&gt;
     &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>