Untitled

<html>
<style>
.bullet{
  width: 100%;
}
.bullet li{
  position: relative;
  list-style-type: none;
  border-top: 1px solid red;
  border-bottom: 1px solid red;
  padding-left: 40px;
  background: -moz-linear-gradient(left, rgba(17,11,170,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(17,11,170,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(17,11,170,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.bullet li:after{
  content: '';
  width: 30px;
  height: 100%;
  position: absolute;
  background: rgb(206,219,233); /* Old browsers */
background: -moz-linear-gradient(left, rgba(206,219,233,1) 0%, rgba(170,197,222,1) 17%, rgba(97,153,199,1) 50%, rgba(58,132,195,1) 51%, rgba(65,154,214,1) 59%, rgba(75,184,240,1) 71%, rgba(58,139,194,1) 84%, rgba(38,85,139,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  left: 0;
  border: 1px solid black;
}
</style>
<ul class="bullet">
  <li>Hey</li>
  <li>Hey</li>
  <li>Hey</li>
  <li>Hey</li>
  <li>Hey</li>
  <li>Hey</li>
  <li>Hey</li>
</ul>
</html>