title: Proper way to position :before pseudo-elements
body: <p>What is the proper way to position <code>:before</code> and <code>:after</code> pseudo-elements, like pictures? I've been messing around with a bunch of different ways, but none of them seem like very elegant solutions.  </p>
  
  <p>This is what I'm trying to do:</p>
  
  <p><img src="https://i.stack.imgur.com/VI49w.jpg" alt="enter image description here"></p>
  
  <p>This is what I did:</p>
  
  <pre><code>div.read-more a:before {
      content: url('/images/read_more_arrow_sm.png');
      position: absolute;
      top: 4px;
      left: -15px;
  }
  
  &lt;div class="read-more"&gt;
      &lt;a href="#"&gt;Read More&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I basically just want the image to be aligned with the text.  Is there another way to do that?</p>
  
  <p>It would be perfect if I could just use padding and margins on the <code>:before</code> image, and that is <em>supposed</em> to be what you do.  But for some reason, that hasn't been working for me.  I can add horizontal padding and margins, but top and bottom padding doesn't do anything.  Why would that happen?  </p>