忽略偽元素的邊距：before或：after

Question

我試圖以邊框可見的方式標記給定的一般HTML元素集合（它們的CSS不在我的控制之下）的邊框，並且它們在懸停時突出顯示。

我目前正在使用偽元素：之前和之后實現這一點，但我正在努力與邊緣。 我需要使用CSS，而不是JS。

期望的行為是在任何兩個元素之間只有一條線，但由於邊距，邊界在段落“Some content”和標題“World”之間重復。

我可以將標記類應用於包裝div或直接應用於類元素，如下面的代碼片段所示，對我來說都可以。

 .mark-borders:before, .mark-borders:after { content: ''; position: absolute; left: 0; right: 0; display: block; height: 1px; border-bottom: dashed 1px #ccc; } .mark-borders:hover:before, .mark-borders:hover:after { border-bottom: solid 1px red; z-index: 1; } 

 <div class="mark-borders"> <h1> Hello </h1> </div> <div class="mark-borders"> <p> Some content </p> </div> <div class="mark-borders"> <h1> World </h1> </div> <br /> <hr /> <div class="mark-borders"> <h1> Hello </h1> </div> <p class="mark-borders"> Some content </p> <h1 class="mark-borders"> World </h1> 

有沒有什么方法如何在不使用JS放置邊框線的情況下保留懸停高光效果的同時將邊框“合並”到單個邊框之間？

我嘗試過使用：after for all，和：之前僅用於第一個元素，但在這種情況下，我要么丟失頂部邊框的懸停效果，要么顯示在錯誤的位置（與原始邊框相同的問題）。

---

更新：

我能夠用以下概念整合幾乎可行的解決方案：

• 每個元素顯示其：在邊界之前
• 最后一個元素也顯示：邊界之后
• 懸停激活：在當前元素的邊界之前和：在其下一個兄弟的邊界之前

但是......即使它比原版更好，“邊緣”區域已經死了，沒有響應：懸停，任何想法如何解決？

更新的代碼：

 .mark-borders:before, .mark-borders:last-child:after { content: ''; position: absolute; left: 0; right: 0; display: block; height: 1px; border-bottom: dashed 1px #ccc; } .mark-borders:hover:before, .mark-borders:hover:last-child:after, .mark-borders:hover + *:before { border-bottom: solid 1px red; z-index: 1; } 

 <div> <div class="mark-borders"> <h1> Hello </h1> </div> <div class="mark-borders"> <p> Some content </p> </div> <div class="mark-borders"> <h1> World </h1> </div> </div> 

Answer 1

我編輯了你的代碼並提出了這個： https ： //jsfiddle.net/7g31c5rp/4/

.mark-borders:nth-of-type(2):after,
  p.mark-borders:after{
  display: none;
}
.mark-borders:hover + .mark-borders:before{
   border-bottom: solid 1px red;
   z-index: 1;
}

在懸停之前刪除之后的某些內容並將其定位到WORLD。

Answer 2

只添加一個邊框:before ，使用兄弟選擇器。 然后給一個:after邊界到:last-child

 .mark-borders:before, .mark-borders + .mark-borders:before, .mark-borders:last-child:after { content: ''; display: block; position: absolute; height: 0; width: 100%; margin-top: -1px; border-bottom: dashed 1px #ccc; } .mark-borders:hover:before, .mark-borders:hover + .mark-borders:before, .mark-borders:last-child:hover:after { border-bottom: solid 1px red; z-index: 1; } 

 <div> <div class="mark-borders"> <h1> Hello </h1> </div> <div class="mark-borders"> <p> Some content </p> </div> <div class="mark-borders"> <h1> World </h1> </div> </div>