前/後不含填充

Question

我寫信詢問是否有任何做的完全一樣的代碼同樣的事情，簡單的方法選擇：

jsfiddle.net/t9euvoe9/5/ 

我試圖做的好友列表。我注意到在這裏簡單地使用構建的邊界是不夠的。我發現某種方式在每個朋友都被自定義單行（botttom）分開。

我想當我懸停朋友（上一個朋友的BOTTOM行，和實際HOVERING朋友的BOTTOM行）消失的線。 此外，這些填充物現在無法正常工作（懸停時）。

編輯：

我想創建好友列表。其實我有<div>其中包含所有其他<div class="friend">。我想每一個<div class="friend">與單行線，這將吸塵器吸塵朋友元素

方式後隱藏我實際上做這個分離：位置的<div class="friend">

元素被設置爲相對的。我很有創意自定義邊框線使用:before和:after僞選擇器。 當某些<div class="friend">被徘徊時，我使用display:none隱藏了此邊框。這隱藏了底部邊框。爲了隱藏頂部邊框，我通過設置margin-top: 1%和padding-top: 6%來移動<div class="friend">以稍微高一些以克服此移動。

例子：

.friend { 
 
    position: relative; 
 
    width: 100px; 
 
    padding-top: 5%; 
 
\t padding-bottom: 5%; 
 
} 
 

 
.friend:hover { 
 
\t margin-top: -1%; 
 
\t padding-top: 6%; 
 
\t height: calc(100% + 1px); 
 
    background-color: red; 
 
} 
 
.friend:hover:after { 
 
\t display:none; 
 
} 
 

 
.friend img { 
 
    vertical-align: middle; 
 
} 
 

 
.friend:first-child:before { 
 
\t content: ''; 
 
\t display: block; 
 
    width: 100%; 
 
\t left: 10%; 
 
\t height: 1px; 
 
\t position: absolute; 
 
\t background-color: #ccc; 
 
\t top: 0; 
 
} 
 

 
.friend:after { 
 
\t content: ''; 
 
\t display: block; 
 
    width: 100%; 
 
\t left: 10%; 
 
\t height: 1px; 
 
    position: absolute; 
 
\t background-color: #ccc; 
 
\t 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

雖然這個問題可能definetely更好（見註釋BSMP左），我在回答了一個鏡頭。

http://jsfiddle.net/tw32r0L6/

我所做的就是刪除了一堆額外的東西，並簡化了一點。你應該真的使用CSS border屬性，因爲它是內置的這樣做的方式。這個基本任務不需要使用僞元素。

因此，移除你有僞元素的CSS後，你可以看到，我添加了這個：

.friend:not(:first-of-type){ 
    border-top: 2px #000 solid; 
} 

.friend:hover + .friend, .friend:hover{ 
    border-top-color: transparent; 
} 

第一部分選擇.friend的div，這是不是第一個，因爲你可以看到:not(:first-of-type)。你可以閱讀更多關於CSS僞類here。你可以看到我添加的唯一樣式是頂部邊框。

然後第二個選擇器隱藏所有.friend div的頂部邊框，以及懸停後的第一個.friend div。這是通過使用+選擇器來選擇元素的下一個兄弟。

我做的最後一件事就是刪除了其他.friend:hover部分中的一些東西，因爲這些修復之後並不需要這些東西。