Ignorer la marge pour les pseudo-éléments :before ou :after

Question

J'essaie de marquer des bordures pour un ensemble donné d'éléments HTML généraux (leur CSS n'est pas sous mon contrôle) de manière à ce que les bordures soient visibles et qu'elles soient mises en évidence au survol.

J'utilise actuellement les pseudo-éléments :before et :after pour y parvenir, mais j'ai du mal avec les marges. J'ai besoin d'utiliser les CSS pour cela, pas les JS.

Le comportement souhaité est de n'avoir qu'une seule ligne entre deux éléments, mais à cause des marges, les bordures sont dupliquées entre le paragraphe "Some content" et le titre "World".

Je suis en mesure d'appliquer des classes de marqueurs soit à des divs enveloppants, soit directement à des éléments de classe, comme indiqué dans l'extrait ci-dessous, les deux me conviennent.

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

Existe-t-il un moyen de "fusionner" les bordures en une seule tout en préservant l'effet de surbrillance au survol sans utiliser de JS pour placer les lignes de bordure ?

J'ai essayé d'utiliser :after pour tous les éléments, et :before uniquement pour le tout premier élément, mais dans ce cas, soit je perds l'effet de survol pour la bordure supérieure, soit elle s'affiche au mauvais endroit (même problème qu'avec les bordures originales).

---

UPDATE :

J'ai pu mettre au point une solution presque fonctionnelle avec le concept suivant :

• Chaque élément affiche sa bordure :before
• Le dernier élément affiche également sa bordure :after
• Le survol active la bordure :before de l'élément actuel et la bordure :before de son élément frère suivant.

Mais ... même s'il fonctionne mieux que l'original, la zone "margin" est morte, ne répondant pas au :hover, des idées pour la corriger ?

Code mis à jour :

.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

J'ai modifié votre code et j'ai obtenu ceci : 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;
}

supprimer le some-content after et cibler le WORLD before au survol.

Answer 2

Ajouter seulement une bordure :before en utilisant les sélecteurs de frères et sœurs. Donnez ensuite un :after à la frontière de la :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>