Underline left floating divs - html

Question

The goal is to achieve this effect without adding any html tag (div, hr, ...) each three divs.
That mean through css only.
What I thought would be an idea was to set the line-height to 150px and underlining it.
But it doesn't seem to produce the result.
The css I use for now produces the result without the underline:
.projectContainer{
/*line-height:150px;
text-decoration:underline;*/
}
.projectBlock{
position:relative;
display:block;
float:left;
width:200px;
height:150px;
}
.projectImage{
position:absolute;
top:0px;
left:0px;
width:200px;
height:112px;
background-size:contain;
background-position:0% 50%;
background-repeat:no-repeat;
}
.projectCaptcha{
position:absolute;
top:113px;
left:0px;
width:200px;
height:88px;
font-size:12px;
}
And the html is a list of:
<div class="projectBlock">
<div class="projectImage" style='background-image:url(...)'></div>
<div class="projectCaptcha">MUSÉE RATH, GENEVE MAURICE BRAILLARD</div>
</div>
in a:
<div class="projectContainer">
...
</div>
If the comment is removed the result is not what was planed:
Thank you and sorry for my english!

Answer 1

Sounds like you could just add a border-bottom to .projectBlock.
.projectBlock {
border-bottom: 1px solid black;
...
}
You might need to add some margin and padding above and below to get the spacing correct.

Answer 2

You can just use the border property, and if you only want to select certain divs use nth-child(an+b) pseudo-class.

Answer 3

Fiddle
I think you need to clear the floats for each container.
.projectContainer{
height:150px;
border-bottom:1px solid #777;
clear:both;
}