HTML/CSS steps with active/inactive states and link lines

Question

I am trying to create a piece of markup/css that would reflect the required design. Is there a better method of doing this - using before/after attributes?

What's the best way of drawing a line between the dots

http://jsfiddle.net/39sg7f3n/3/

//html

<ul class='status'>
  <li class='active'>
    <h3>Call</h3>
    <div class='dot'><span></span></div>
    <h3>Completed</h3></li>
  <li class='inactive'>
    <h3>Proposal</h3>
    <div class='dot'><span></span></div>
    <h3>Waiting</h3></li>
  <li class='inactive'>
    <h3>Hire</h3>
    <div class='dot'><span></span></div>
    <h3>xx</h3></li>
</ul>

//css

ul.status {
  border-top: 1px solid green;
  list-style-type: none;
}

ul.status li {
  float: left;
  margin-right: 40px;
  text-align: center;
}

ul.status li.active,
ul.status li.active h3 {
  color: orange;
}

ul.status li .dot {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background-color: grey;
  margin: 0 auto;
}

ul.status li .dot span {
  background: white;
  width: 6px;
  height: 6px;
  display: block;
  border-radius: 6px;
  margin: 3px;
  position: absolute;
}

ul.status li.active .dot {
  background: orange;
}

Answer 1

ul{list-style:none;}
	ul li{float:left;}
	ul li.active span{color:orange;}
	ul li.inactive span{color:gray;}
	ul li span{display: block;position: relative;text-align: center;padding: 25px;}
	ul li span:first-child:after{content: '';position: absolute;width: 10px;height: 10px;border-radius: 50%;bottom: -8px;left: calc(50% - 5px);z-index:1;}
	ul li.active span:first-child:after{border: 3px solid orange;background-color: white;}
	ul li.inactive span:first-child:after{border: 3px solid gray;background-color: white;}
	ul li:first-child span:last-child:after{content: '';border-top: 1px solid gray;width: 50%;position: absolute;left: 50%;top: 0;}
	ul li:last-child span:last-child:before{content: '';border-top: 1px solid gray;width: 50%;position: absolute;left: 0;top: 0;}
	ul li:not(:last-child) span:last-child:after{content: '';border-top: 1px solid gray;width: 50%;position: absolute;left: 50%;top: 0;}
	ul li:not(:first-child) span:last-child:before{content: '';border-top: 1px solid gray;width: 50%;position: absolute;left: 0;top: 0;}

<ul>
	<li class="active"><span>Call</span><span>Completed</span></li>
	<li class="inactive"><span>Proposal</span><span>Waiting</span></li>
	<li class="inactive"><span>Hire</span><span></span></li>
	</ul>

很高兴为您提供帮助。