title: Can I use CSS to add a bullet point to any element?
body: <p>Pretty simple question, but I am not sure if it is possible.  I want to add an image to act as a bullet in all <code>&lt;h1&gt;</code> elements.  I know I can achieve this by:</p>
  
  <pre><code>&lt;span class='bullet'&gt;&lt;/span&gt;&lt;h1&gt;My H1 text here&lt;/h1&gt;
  </code></pre>
  
  <p>with css:</p>
  
  <pre><code>.bullet{
      background: url('bullet.png') no-repeat;
      display:inline-block;
      vertical-align: middle;
      background-size:100%;
      height:25px;
      width:25px;
      margin-right: 5px;
  }
  </code></pre>
  
  <p>but is there an automatic way to do the same thing?  I was thinking something like:</p>
  
  <pre><code>h1{
      list-style-image: url('bullet.png');
  }
  </code></pre>
  
  <p>but that only seems to work with <code>&lt;ul&gt;</code> elements.  I really don't want to have to paste the <code>&lt;span&gt;</code> element everywhere before the <code>&lt;h1&gt;</code> element.  Any ideas?</p>