custom Style using bullets

by Kheema Pandey

HTML

<ul class="filter-box">
    <li class="main-cat">
		<h3><strong>Main Content</strong></h3>
	</li>
	<li class="sub-cat">
		<h4>sub content</h4>
	</li>                                 
	<li class="sub-cat">
		<h4>sub content</h4>
	</li>                                 
	<li class="sub-cat">
		<h4>sub content</h4>
	</li>                                 
	<li class="sub-cat">
		<h4>sub content</h4>
	</li>   

	<li class="main-cat">
		<h3>Main Content</h3>
	</li>
</ul>

CSS

body {
  background: purple;
}
.filter-box {
  float: left;
  margin: 15px 3% 0 2%;
  padding:0;
  width: 29%;
  min-width:250px;
  background:linear-gradient(to right,
  transparent 15px,
  white 15px,
  white 17px,
  transparent 17px)
}
.filter-box > .main-cat {
  background-color: #FFFFFF;
  display: block;
  margin-top: 5px;
  padding: 10px;
  position: relative;
}
.filter-box > .main-cat > h3 {
  margin: 0;
}
.filter-box > .main-cat:after {
  border-bottom: 15px solid rgba(0, 0, 0, 0);
  border-left: 15px solid #FFFFFF;
  border-top: 15px solid rgba(0, 0, 0, 0);
  content: "";
  height: 0;
  margin-top: -15px;
  position: absolute;
  right: -14px;
  top: 50%;
  width: 0;
}
.filter-box > .main-cat:first-child {
  margin-top: 0;
}
.filter-box > .sub-cat {
  background:linear-gradient(
    to right,
 transparent 40px , 
    #FF9000 40px),
    linear-gradient(
      to bottom,
      transparent 49%,
      white 48%,
      white 52%,
      transparent 51%
      ) right no-repeat;
  background-size:auto auto, 96% 100%;
  margin-left: 0px;
  margin-top: 5px;
  padding: 0 10px;
  position: relative;
  display:list-item;
  color:white;
  font-size:2.2em;
  list-style-position:inside;
  white-space:nowrap;
}
.filter-box > .sub-cat > h4 {
  margin: 0;
  font-size:0.5em;
  display:inline-block;
  text-align: right;
  width:85%;
  vertical-align:middle;
  padding:0px 0 8px;
}
> .sub-cat:after {
        width: 2px;
        height: 100%;
        top: 0;
        left: -10px
        position: absolute;
    }