StackOverflow Demo: center image on links

Someone wanted to know how to use CSS to center a bg on links of varying widths.

by Brenton Strine

HTML

<ul>
  <li><a href="#">First Item</a></li>
  <li><a href="#">m</a></li>
  <li><a href="#">Very very short Item</a></li>
  <li><a href="#">Another Item</a></li>
  <li><a href="#">Last Item</a></li>
</ul>

CSS

li a { position: relative;} /* makes position:absolute; work below */
li a:after{
    content: "";
    position: absolute;
    top: 0;
    left: 50%; /* centers the left edge */
    width: 15px; /* set window to see sprite through */
    height: 18px; /* set window to see sprite through */
    background: url(https://www.google.com/images/nav_logo129.png) no-repeat -15px -327px; /*  set up the sprite. Obviously change this fto make each one different. */
     margin-left: -8.5px; /* this centers the actual sprite--this is half the sprite-window width. if you don't do this, the left edge will be centered instead of the center of the sprite.  */
}