title: :before, :after and padding
body: <p>I have the following css-code:</p>
  
  <pre><code>.readMore:before {
      content: '';
      display: block;
      float: left;
      width: 10px;
      height: 27px;
      margin: 0;
      background: red url('images/button.png');
      background-position: 0 0;
  }
  
  .readMore {
      float: left;
      height: 24px;
      background: url('images/button.png');
      background-position: -10px 0;
      border: 0;
      margin: 0;
      padding: 4px 0 0 0;
      cursor: pointer: 
  }
  
  .readMore:after {
      content: '';
      display: block;
      float: right;
      width: 10px;
      height: 27px;
      margin: 0;
      top: -3px;
      background: red url('images/button.png');
      background-position: -411px 0;
  }
  </code></pre>
  
  <p>Which styles a link that looks like this:
  <img src="https://i.stack.imgur.com/5Ypol.png" alt="enter image description here"></p>
  
  <p>But when trying to adjust the text in the .readMore in vertical the :before and :after images also get "jumps" down. Which is logical, but is there a solution so it will align better with the "total image"?</p>