CodePen

HTML

            
              
<ul>
<li><a href="A">Alice</a></li>
<li><a href="B" class="active">Bob</a></li>
<li><a href="C">Charles</a></li>
<li><a href="D">Dave</a></li>
<li><a href="E">A Reallllly Long Link</a></li>
</ul>

            
          
!
via HTML Inspector

CSS

            
              body { background: #222; }

ul {   
  margin: 10px;
   padding: 20px;

}

li { 
  display: inline-block;
  list-style: none inside none;
  /* Line-height set to the height of the image */
  line-height: 25px;
  /* margin controls how much overlap */
  margin: 0 -12px; 
}

a { 
  font-size: 12px;
  background: #ebedbd;
  position: relative; 
  /* padding shouldnt break stuff */
  padding:0 10px;
  /* margin set to the width of the image */
  margin: 0 22px;
  display: block;
 }

a:before, a:after { 
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAABkCAYAAACCXsDxAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAABUlJREFUaN61mW1MlWUYx08Op/WhTTnEEdaoFa2SMsOGq1Y0BgSdUt7EePOgmIBEijAkOggxosz5hnI0mBlgiBgxh/kBdGyhNWtgGBHJW470ICNC4i1M+l/4HBI45znPfd+PbL9vD7/d3Pd9Pc//utDs/WTRZE2l03hXy+Nlmdv9fOM2BIWCcIlA4AYWaFh/SGyhuNDpdtnRtYcjIiIMIAHEgUDwCFjALbZQeey19sjIt9MhywCJYBV4kkluTUycqfZsi4lZkwrZFhAN9OBRMF9ITHxb++zFWENIqrQtG4E30IF5QmLiwtllVdiWbZBtBeFghaItsScmCve9kQzZDkkeCdzBQmFxxRe6MVw5Osht0pb4ADfgICQmmr7X0yHSytcDP+AFHG3KlYpPljlNpKW8Sldwu3SYdNefAYuExFOrvuBWvj42OBMyuikpIASsBPcLiYsKFk/u2enxPkQfgjRp1VQ8T8+Rs4iJtiaXs5sTAj6CKF0qnlDwInAWEt95pyzdKq34PWnV/rTqGeKCXYuZxY0NSzriN+lzIaNt2QSCgecMsWkvu5g4WrQiWbohdIib6RBniA/v4xPXntINxm1YnQUhrdwIAujqTd/r4oOOt3nEUxVZ6v0xRCWgUCr154E2OcnfQXPExC/++kvdmGFd6HHIiqVtiQFLIdZqSj7jFxPfVC2/Eh0d/imEdAWpePQQuwuLiYa6p6pQkSZIC8AHEAdpyood/xUVE3U1j+XhMI9AvAdio6b8c60qYir3msqHc+PfeZPE+ZrKEu0tNcQEXd2On58zGjO8sjV4HaomtvDdOV2f5p+xtsnx0ebWv/pMWzIzfH3XxYSFgnCJQOAG2AMLif+ndfDSj/nv4uMpHlhmiu/QZz5VbjCEigUWa2LizxulpYnxgfyBxZaY6DfvP4D95QsscmLi0g852dJnny2w2BMT2VkG9sCiRDzQf75JOkjlgUWJmKg4lsIWWJSKR4Z+6oyKWqs8sCgVEw31aVnSO9d+YGERo/SHE+KDlAUWFjHR2ZazS/payAcWVvHU9TP62w8seHCCVTxwo6QiJnqNfGDBg+M8qz5U8LJ8YMFDozzi4Zt1DRvjVtkOLHhoiEdM1Hz1gtXAgi+2A4kHecUjQ7W/JCW+PiewQKwl8QCveOqjcH33CfSCMwILxO4k7hcREy2Nhjx8zqYDS2xsSBCJe0XFRJHJJw/SqcCCv8BIYrMaYir3HcagXEmcT+IeNcTE2Mjl0eqTUcb01FeySXxVLfH0bbl5uk6j1k/v76sXXmv3PHSm6qFxSkOqSK91eOXMDvCiq5zX0ezyq7X8JiTubnG9bCsYckt7fnOvl0ucfHva7mmyF2WZpebuAE8lGZlZfO6089+qi693escpTfVMV6v6uNOE6mIUwU6WPkTpah+gdkt18R9XPE6wdk4KVvuWK09LZlds610gB01t5FfbrffgWS1NbWTF5+t0A7ytr+3S7fIJ4215aWpjsxjwJRjjFdNL36r4aqtrs0iTTsMVaxW2W7T7nyM2d/n6qTFWoKnN3e/Z5axlawua2lheh/G8gz2r/+4o0d7SNDYs6VV7wkJTG9UCCxKQA4gGrZSG1JLqZwd4UeF9oMhafhMVH7QVDEWk2XKJk1caZS/K8khdlWRkHvFF1cX4hZVKUz3r1eq8F+Jglj5EqXQ+GL4X4iTWzkmJ9EGelkyJuIhDPGFP6szZRI7bE9dzikflpMsE2t4huWJoERAP2hIfEGzUB6xJw1SYAPTPlj6h0mih926pC2vZymC2SF/iHezZoIekNWpPWGhq8x+zh2lfujm9VQAAAABJRU5ErkJggg==') no-repeat;
  position: absolute; 
  top: 0; 
  bottom: 0; 
 /* width of the image again */
  width: 22px; 
  content: ""; 
} 


a:before { 
  z-index: 199;
  /* left negative image width */
  left: -22px; 
  background-position: 0 -75px;
 
} 

a:after { 
  z-index: 200;
  /* right negative image width */
  right: -22px; 
  background-position: 0 -25px;
}

a.active {
  background: #908911;
}

a.active:before { 
  z-index: 201;
  background-position: 0 -50px;
} 

a.active:after { 
  background-position: 0 0;
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................