title: Restyling an unordered list using pseudo elements
body: <p>I am trying to create a custom list using pseudo elements in CSS. </p>
  
  <p>When I add this "position: absolute; top: 6px; left: 0px;", my images for my arrows disappear altogether. When I remove the above line of code, my arrow images appear above the text each list item. </p>
  
  <p>I want my custom arrows to appear next to the next of each list item. How can I fix this?</p>
  
  <p>Here is my code.</p>
  
  <pre><code>  &lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
          &lt;title&gt;My Web Page&lt;/title&gt;
          &lt;style type="text/css"&gt;
              body { font-family: Arial; font-size: 16px; background-color: #f8e6ae; color: #888; }
              .page { background-color: #fff; padding: 20px 30px 30px 50px; margin: 100px; }
              .page h1 {
                  color: #fff;
                  font-size: 1.3em; font-weight: normal;
                  text-transform: uppercase;
                  background-color: #d60000; 
                  position: relative;
                  margin: 0px -70px 20px -50px;
                  padding: 18px 0px 16px 50px;
  
  
              }
  
              .page h1:after {
                  content: '';
                  display: block; height: 40px; width: 40px;
                  background: url(images/fold.gif) no-repeat 0 0; 
                  position: absolute; right: 0px; bottom: -40px;
  
  
  
              }
  
  
              .page p { line-height: 1.2em; }
              .page a { color: #1badd2; text-decoration: none; }
              .page ul { margin: 0;  padding:0; }
  
              .page li { display: block; position: relative; 
                      padding: 2px 0px 8px 35px;
                  }
              .page li:before {
                  content: '';
                  display: block;
                  background: url(images/arrow.png) no-repeat 0 0;
                  height: 12px; width 30px;
                  position: absolute; top: 6px; left: 0px;
                  background-size: 20px 8px;
                  }
  
  
  
  
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="page"&gt;
  
              &lt;h1&gt;My Web Page&lt;/h1&gt;
  
              &lt;p&gt;Lorem ipsum dolor sit amet consectetur adi pisicing elit sed do eiusmod tempor incid idunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer citation ull amco laboris nisi ut aliquip ex ea commodo consequat elit sed do.&lt;/p&gt;
  
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="http://goo.gl/4mkQQH"&gt;Automating Web Graphics&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://goo.gl/jc62NJ"&gt;Slice Tool&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://goo.gl/WzAb1X"&gt;Smart Objects&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://goo.gl/6SwVuo"&gt;Layer Comps&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  
  .
  </code></pre>