Before / After selectors excluding padding - html

Question

I'm writing to ask if there is any simpler method to do exactly the same thing like in this code:
jsfiddle.net/t9euvoe9/5/
I'm trying to do friends list. I noticed that simple using of built borders isn't enough here. I found some way which in EVERY friend is divided by custom single line (botttom).
I want lines to dissapear when I'm hovering friend (BOTTOM line of PREVIOUS friend, and BOTTOM line of actually HOVERING friend).
Also, these paddings are not working properly right now (when hovering).
edit:
I want to create friends list. Actually I have <div> which contains all another <div class="friend">. I want to separate every <div class="friend"> with a single line, which will be hidden after hoovering friend element
The way I'm actually doing this:
Position of <div class="friend"> element is set to relative. I'm creative custom border line using:before and :after pseudo-selectors.
When some <div class="friend"> is hovered, I'm hiding this border using display:none. This hides bottom border. To hide top border I'm moving <div class="friend"> little bit higher by setting margin-top: 1% and padding-top: 6% to overcome this move.
Example:
.friend {
position: relative;
width: 100px;
padding-top: 5%;
padding-bottom: 5%;
}
.friend:hover {
margin-top: -1%;
padding-top: 6%;
height: calc(100% + 1px);
background-color: red;
}
.friend:hover:after {
display:none;
}
.friend img {
vertical-align: middle;
}
.friend:first-child:before {
content: '';
display: block;
width: 100%;
left: 10%;
height: 1px;
position: absolute;
background-color: #ccc;
top: 0;
}
.friend:after {
content: '';
display: block;
width: 100%;
left: 10%;
height: 1px;
position: absolute;
background-color: #ccc;
bottom: 0;
}
<div class="friend">
<img class="img-circle" src="http://www.zerohedge.com/sites/default/files/pictures/picture-197359.gif" alt="" width="40" height="40">
<span class="name">Ania</span>
</div>
<div class="friend">
<img class="img-circle" src="http://www.zerohedge.com/sites/default/files/pictures/picture-197359.gif" alt="" width="40" height="40">
<span class="name">Ania</span>
</div>

Answer 1

Although this question could definetely be better (see the comment BSMP left), I gave a shot at answering.
http://jsfiddle.net/tw32r0L6/
What I did was remove a bunch of extra stuff, and simplify a little. You should really be using the CSS border property, because it is the built in way of doing something like this. Using pseudo-elements isn't required for this basic of a task.
So after removing the CSS you had for pseudo elements, you can see that I added this:
.friend:not(:first-of-type){
border-top: 2px #000 solid;
}
.friend:hover + .friend, .friend:hover{
border-top-color: transparent;
}
The first part selects the .friend divs, that are not the first one, as you can see by :not(:first-of-type). You can read more about CSS pseudo-classes here. You can see that the only style I added was a top border.
Then the second selector hides the top border from all .friend divs that are hovered, and the first .friend div following one that was hovered. This is done using the + selector which selects the next sibling of an element.
The last thing I did was remove some stuff you had in the other .friend:hover part, because that wasn't needed after these fixes.