How to achieve this effect? its about borders/lines

Question

https://codepen.io/anon/pen/NpoevM

https://i.sstatic.net/FsYHY.jpg

I want to have the small lines to separate the boxes. I was thinking about how to make the lines like in the picture. I was thinking using borders or span but having trouble

#third {
  height: 55%;
  width: 40%;
  display: flex;
  flex-direction: column;
  float: right;
}
.t-row {
  height: 100%;
  display: flex;
}
.tbox {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.fa {
  font-size: 5em !important;
}

<section id="third">
  <div class="hr-lines">
    <hr class="icon-sep">
  </div>
  <div class="t-row">
    <div class="tbox tb-one">
      <i class="fa fa-home" aria-hidden="true"></i>
      <h1 class="t-text">Home</h1>
    </div>
    <div class="tbox tb-two">
      <i class="fa fa-info-circle" aria-hidden="true"></i>
      <h1 class="t-text">About</h1>
    </div>
  </div>	
  <div class="t-row">
    <div class="tbox tb-three">
      <i class="fa fa-book" aria-hidden="true"></i>
      <h1 class="t-text">Work</h1>
    </div>
    <div class="tbox tb-four">
      <i class="fa fa-envelope" aria-hidden="true"></i>
      <h1 class="t-text">Hire</h1>
    </div>
  </div>
</section>

Answer 1

check below snippet. I have used :after for all four div and used border to create the + sign.

#third {
    height: 55%;
    width: 40%;
    display: flex;
    flex-direction: column;
    float: right;
}

.t-row {
    height: 100%;
    display: flex;
}

.tbox {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.fa {
    font-size: 5em !important;
}

.tb-one,
.tb-two,
.tb-three,
.tb-four {
    position: relative;
}

.tb-one:after,
.tb-two:after,
.tb-three:after,
.tb-four:after {
    position: absolute;
    content: " ";
    border: 1px solid #000;
    width: 20px;
    height: 20px;
    display: block;
}

.tb-one:after {
    bottom: 0;
    right: 0;
    border-top: none;
    border-left: none
}

.tb-two:after {
    bottom: 0;
    left: 0;
    border-top: none;
    border-right: none
}

.tb-three:after {
    top: 0;
    right: 0;
    border-bottom: none;
    border-left: none
}

.tb-four:after {
    top: 0;
    left: 0;
    border-bottom: none;
    border-right: none
}

<section id="third">
    <div class="hr-lines">
        <hr class="icon-sep"> 
    </div>
    <div class="t-row">
        <div class="tbox tb-one"> 
           <i class="fa fa-home" aria-hidden="true"></i>
           <h1 class="t-text">Home</h1> 
        </div>
        <div class="tbox tb-two"> 
           <i class="fa fa-info-circle" aria-hidden="true"></i>
           <h1 class="t-text">About</h1> 
        </div>
    </div>
    <div class="t-row">
        <div class="tbox tb-three"> 
           <i class="fa fa-book" aria-hidden="true"></i>
           <h1 class="t-text">Work</h1> 
        </div>
        <div class="tbox tb-four"> 
            <i class="fa fa-envelope" aria-hidden="true"></i>
            <h1 class="t-text">Hire</h1> 
        </div>
    </div>
</section>

Answer 2

You can use a '+' inside a span and position / style it

#third {
	height: 55%;
	width: 40%;
	display: flex;
	flex-direction: column;
	float: right;
  position:relative;
}

.t-row {
	height: 100%;
	display: flex;
}

.tbox {
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}




.fa {
	font-size: 5em !important;
}

.lines { position:absolute; font-size:150px; top:17%; left:40% }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

<section id="third">
  <span class="lines">+</span>
		<div class="t-row">
			<div class="tbox tb-one">
				<i class="fa fa-home" aria-hidden="true"></i>
				<h1 class="t-text">Home</h1>
			</div>
			<div class="tbox tb-two">
				<i class="fa fa-info-circle" aria-hidden="true"></i>
				<h1 class="t-text">About</h1>
			</div>
		</div>	
		<div class="t-row">
			<div class="tbox tb-three">
				<i class="fa fa-book" aria-hidden="true"></i>
				<h1 class="t-text">Work</h1>
			</div>
			<div class="tbox tb-four">
				<i class="fa fa-envelope" aria-hidden="true"></i>
				<h1 class="t-text">Hire</h1>
			</div>
		</div>
	</section>

Answer 3

In your code add four classes with border property of div.

    <style>
#third {
    height: 55%;
    width: 40%;
    display: flex;
    flex-direction: column;
    float: right;
}

.t-row {
    height: 100%;
    display: flex;
}

.tbox {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.fa {
    font-size: 5em !important;
}
.left-border{ border-left : 1px solid;}
.right-border{ border-right : 1px solid;}
.bottom-border{ border-bottom : 1px solid;}
.top-border{ border-top: 1px solid;}
</style>
<section id="third">
    <div class="hr-lines">
        <hr class="icon-sep">
    </div>
    <div class="t-row">
        <div class="tbox tb-one  right-border bottom-border">
            <i class="fa fa-home" aria-hidden="true"></i>
            <h1 class="t-text">Home</h1>
        </div>
        <div class="tbox tb-two left-border bottom-border">
            <i class="fa fa-info-circle" aria-hidden="true"></i>
            <h1 class="t-text">About</h1>
        </div>
    </div>  
    <div class="t-row">
        <div class="tbox tb-three top-border right-border">
            <i class="fa fa-book" aria-hidden="true"></i>
            <h1 class="t-text">Work</h1>
        </div>
        <div class="tbox tb-four top-border left-border">
            <i class="fa fa-envelope" aria-hidden="true"></i>
            <h1 class="t-text">Hire</h1>
        </div>
    </div>
</section>