忽略伪元素的边距：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>