vertical & horizontal line>brfore & after

.portfolio1:after {
 background: none repeat scroll 0 0 #ddd;
bottom: 0;
content: "";
height: 107px;
left: 36%;
position: absolute;
top: 202px;z-index:-1;
width: 3px;
}


.portfolio2:after {
 background: none repeat scroll 0 0 #ddd;
bottom: 0;
content: "";
height: 107px;
left: 36%;
position: absolute;
top: 202px;z-index:-1;
width: 3px;
}
.portfolio3:after {
 background: none repeat scroll 0 0 #ddd;
bottom: 0;
content: "";
height: 107px;
left: 36%;
position: absolute;
top: 202px;z-index:-1;
width: 3px;
}

.portfolio4:after {
 background: none repeat scroll 0 0 #ddd;
bottom: 0;
content: "";
height: 107px;
left: 36%;
position: absolute;
top: 202px;z-index:-1;
width: 3px;
}

.portfolio1:before {
  background: none repeat scroll 0 0 #ddd;
  bottom: 0;
  content: "";
  height: 3px;
  left: 65%;z-index:-1;
  position: absolute;
  top: 102px;
  width: 123px;
}


.portfolio2:before {
  background: none repeat scroll 0 0 #ddd;
  bottom: 0;
  content: "";
  height: 3px;
  left: 65%;z-index:-1;
  position: absolute;
  top: 102px;
  width: 123px;
}
.portfolio3:before {
  background: none repeat scroll 0 0 #ddd;
  bottom: 0;
  content: "";
  height: 3px;z-index:-1;
  left: 65%;
  position: absolute;
  top: 102px;
  width: 123px;
}

.portfolio5:before {
  background: none repeat scroll 0 0 #ddd;
  bottom: 0;
  content: "";
  height: 3px;z-index:-1;
  left: 65%;
  position: absolute;
  top: 102px;
  width: 123px;
}
.portfolio6:before {
  background: none repeat scroll 0 0 #ddd;
  bottom: 0;
  content: "";
  height: 3px;z-index:-1;
  left: 65%;
  position: absolute;
  top: 102px;
  width: 123px;
}

.portfolio7:before {
  background: none repeat scroll 0 0 #ddd;
  bottom: 0;
  content: "";
  height: 3px;z-index:-1;
  left: 65%;
  position: absolute;
  top: 102px;
  width: 123px;
}