not able to get div with border - html

Question

I am trying to achieve a simple css border effect with proper padding. Trying to make it responsive without using bootstrap.
I just have one font and border around it and arrows between two div but I am not getting it
code:
#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
.work {
float: left;
border: 4px solid black;
padding: 10px 10px 10px 10px;
}
.work:before {
content: '\f178';
margin-top: 10px;
position: absolute;
right: -11px;
top: 44%;
}
<div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST1</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST2</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST3</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST4</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST5</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST6</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST7</h4>
</div>
</div>
link to codepen: https://codepen.io/rahulv/pen/BRwjEd
what I am trying to acheive is I dont get padding between two boxes also I want arrow between them .. its like test1 -> test2 -> test3..

Answer 1

You are missing the border style property which is required. Also you need position: relative; on .work to make the absolutely positioned psuedo element work, and the font-awesome font-family. Text-align: center for icons...
Check out full example:
.work{
position: relative;
float:left;
border: 4px solid black;
padding: 10px 10px 10px 10px;
text-align: center;
}
.work:not(:last-of-type) {
margin-right: 20px;
}
.work:not(:last-of-type):before {
content: '\f178';
font-family: "FontAwesome";
margin-top: 10px;
position: absolute;
right: -22px;
top: 41%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST1</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST2</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST3</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST4</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST5</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST6</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST7</h4>
</div>
</div>

Answer 2

You need to do following changes
.work:before {
content: '\f178';
margin-top: 0;
position: absolute;
right: -23px;
top: 50%;
transform: translateY(-50%);
font-family: 'FontAwesome';
}
and
.work:not(:last-of-type) {
margin-right: 20px;
}
Here is working final demo
http://codepen.io/sajiddesigner/pen/EmwKvj

Answer 3

To put the font awesome arrow outside of the right of the parent, use right: 0; to move it to the right side, then push it outside of the parent with translateX().
To have the puzzle piece right above the text, remove the margin (or just margin-top) from the text.
To have space between the boxes, you need a right margin.
.work {
float: left;
border: 4px solid black;
padding: 10px;
margin-right: 25px;
position: relative;
}
h4 {
margin: 0;
}
.work:before {
content: '\f178';
position: absolute;
transform: translateX(150%);
top: 50%; right: 0;
font-family: 'FontAwesome';
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST1</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST2</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST3</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST4</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST5</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST6</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST7</h4>
</div>
</div>

Answer 4

You need to specify the type of border
try using this:
border: 4px black solid;