horizontal line does not look right. What is the reason? - html

Question

I am putting horizontal line after each li. What I want to do is hr should be in the same distance to li(s).
This is my css to put hr
.divider {
content: "";
display: block;
height: 1px;
width: 100%;
background: #ccc;
}
This one of the li(s)
<li style="width:210px;padding:10px 0 10px 0" class="memberElement">
<div class="MemberImageHolder" style="float:left">
<a href="#">
<img class="mediumMemberPicture" src="picture.php?action=display&contentType=members&id=20&quality=medium" alt="" />
</a>
</div>
<div class="memberDetails" style="float:right">
Mert Metin<br>
<span id="title">
Administrator<br><br>
</span>
<span id="unit">
<b>University of Ottawa</b>
<br>
</span>
</div>
<span class="divider"></span>
</li>
However, this is how it looks:
Why it looks like that?

Answer 1

Try clearing your floats before the <span class="divider"> element. Since sibling <div> elements are floated, you'll need to clear the float before placing an element below them.
See also: clearfix
Also, CSS content applies to ::before and ::after pseudo-elements. I have removed it as it is not useful here.
.divider {
...
clear: both;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.divider {
display: block;
height: 1px;
width: 100%;
background: #ccc;
clear: both;
}
<ul>
<li style="width:210px;padding:10px 0 10px 0" class="memberElement">
<div class="MemberImageHolder" style="float:left">
<a href="#">
<img class="mediumMemberPicture" src="http://dummyimage.com/100x100/000/fff" alt="">
</a>
</div>
<div class="memberDetails" style="float:right">Mert Metin<br><span id="title">Administrator<br><br></span><span id="unit"><b>University of Ottawa</b><br></span>
</div><span class="divider"></span>
</li>
<li style="width:210px;padding:10px 0 10px 0" class="memberElement">
<div class="MemberImageHolder" style="float:left">
<a href="#">
<img class="mediumMemberPicture" src="http://dummyimage.com/100x100/000/fff" alt="">
</a>
</div>
<div class="memberDetails" style="float:right">Mert Metin<br><span id="title">Administrator<br><br></span><span id="unit"><b>University of Ottawa</b><br></span>
</div><span class="divider"></span>
</li>
</ul>

Answer 2

You might want to add after:
.divider:after {
content: "";
display: block;
height: 1px;
width: 100%;
background: #ccc;
}