html - 忽略伪元素的边距 :before or :after

Question

我正在尝试以边框可见的方式为给定的一组通用 HTML 元素(它们的 CSS 不受我控制)标记边框，并且它们在悬停时突出显示。

我目前正在使用伪元素 :before 和 :after 来实现这一点，但我正在努力解决利润问题。我需要为此使用 CSS，而不是 JS。

期望的行为是在任意两个元素之间只有一条线，但由于边距，“某些内容”段落和标题“世界”之间的边框重复。

我可以将标记类应用到包装 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，而仅对第一个元素使用 :before，但在那种情况下，我要么失去了顶部边框的悬停效果，要么显示在错误的位置(与原始元素相同的问题边框)。

---

更新:

我能够将几乎可行的解决方案与以下概念放在一起:

• 每个元素显示其 :before 边框
• 最后一个元素也显示它的 :after 边框
• 悬停激活 :before border of current element 和 :before border of its next sibling

但是......即使它比原来的效果更好，“边距”区域已经死了，没有响应 :hover，有什么办法可以修复它吗？

更新代码:

.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。