title: CSS: using image sprites with css pseudo classes :before and :after
body: <p>I have never tried that before. I created an image sprite that is contains two icons. Each icon is 26px wide and high. So the sprite is 26x52px.</p>
  
  <p>I have an element that is either in a div.something or in a div.anything. Depending on which class it's in I want to add a corner cap to the left or right.</p>
  
  <p>So therefore I'm positioning the .element relative, the apply the <code>:before</code> pseudoclass to the img and position it absolute with a height and width of 26px so only one icon of the sprite fits in. I also apply "overflow:hidden" in order to hide the second icon on the sprite.</p>
  
  <pre><code>.element {
      position:relative;
  }
  
  .element:before{
      content: url("../images/sprite.png");
      position: absolute;
      height:26px;
      width:26px;
      overflow:hidden;
  }
  
  .something .element:before {
      top: -2px;
      left: -2px;
  }
  
  anything .element:before {
      top: -28px;
      right: -2px;
  }
  </code></pre>
  
  <p>This works fine for the left-corner where I use the first top icon in the sprite.
  However now I wonder how I can show only the second icon in the sprite for the "anything .element". </p>
  
  <p>So actually the "mask" should be positioned at -2px, -2px but the sprite img inside should start at -26px so the second icon is shown.</p>
  
  <p>Is this possible with css the way I'm doing it right now?</p>