title: CSS content before block with padding
body: <p>Is it possible/how do I:</p>
  
  <p>Remove the padding when using a CSS content/before selector/property?</p>
  
  <p>E.g. given the follow code, how can I make the bottom paragraph look like the top on (with no white space between the <code>content:before</code>) but retain the padding on the paragraph.</p>
  
  <p>Code: <a href="http://jsfiddle.net/569Ed/2/" rel="nofollow">http://jsfiddle.net/569Ed/2/</a></p>
  
  <p>HTML5:</p>
  
  <pre><code>&lt;div class="no-padding"&gt;
      &lt;p&gt;Paragraph&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="padding"&gt;
      &lt;p&gt;Paragraph&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS3:</p>
  
  <pre><code>p {
      outline: 3px solid #fbb;
      outline-top: 2px solid #fbb;
      margin-bottom: 15px;
  }
  p:before {
      content: 'Paragraph';
      border: 1px solid #fbb;
      background-color: #fbb;
      display: block;
  }
  
  .padding p {
      padding: 10px;
  }
  </code></pre>
  
  <p><em>(this is only for the lastest and greatest browsers only, so HTML5 and CSS3/LESS is preferred)</em></p>