Try It Yourself: CSS Image Sprites

HTML Code

<!DOCTYPE html>
<html>
<head>
  <title>CSS Image Sprites</title>
  <meta charset="UTF-8">
</head>
<body>

<h1>CSS Image Sprites</h1>

<ul class="demo">
  <li class="world"><a href="#"><span></span> World</a></li>
  <li class="politics"><a href="#"><span></span> Politics</a></li>
  <li class="sports"><a href="#"><span></span> Sports</a></li>
  <li class="economy"><a href="#"><span></span> Economy</a></li>
  <li class="others"><a href="#"><span></span> Others</a></li>
</ul>

<style>
.demo{
  display: flex;
  background: #393939;
  list-style: none;
  padding: 0;
}  
.demo li{
  width: 100%;
  background-image: url(arrow-border.png);
  background-repeat: no-repeat;
  background-position: left;
  background-position-x: 3px;
  line-height: 1.85em;
}
.demo li:first-child{
  background-image: none;
}
.demo li a{
  display: block;
  padding: 4px 10px;
  color: rgba(204,204,204,1);
  font-size: 14px;
  text-decoration: none;
}
.demo li a span{
  width: 30px;
  height: 24px;
  display: inline-block;
  background-image: url(nav-icons.png);
  background-position: 1px -1px;
  margin-right: 5px;
  opacity: 0.8;
  transition: 0.5s;
}
.demo li.world span{
  background-position: -92px -1px;
}
.demo li.politics span{
  background-position: -28px 1px;
}
.demo li.sports span{
  background-position: -91px -1px;
}
.demo li.economy span{
  background-position: -291px -1px;
}
.demo li.others span{
  background-position: -400px 0px;
}
.demo li.world:hover span{
  background-position: -92px -33px;
}
.demo li.politics:hover span{
  background-position: -28px -33px;
}
.demo li.sports:hover span{
  background-position: -91px -33px;
}
.demo li.economy:hover span{
  background-position: -291px -33px;
}
.demo li.others:hover span{
  background-position: -400px -33px;
}
</style>

</body>
</html>

CSS Code

/* Write your CSS here */

CSS Image Sprites - Playground