Игнорировать маржу для псевдоэлементов: до или: после

Question

Я пытаюсь отметить границы для данного набора общих HTML-элементов (их CSS не находится под моим контролем) таким образом, чтобы границы были видны, и они выделены при наведении.

В настоящее время я использую псевдоэлементы: до и: после достижения этого, но я борюсь с полями. Мне нужно использовать 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 for all и: раньше только для самого первого элемента, но в этом случае я либо теряю эффект наведения для верхней границы, либо отображается в неправильном месте (такая же проблема, как и при использовании оригинальные границы).

---

UPDATE:

я смог собрать почти рабочее решение со следующей концепции:

• Каждый элемент отображает его: до границы
• последний элемент отображается также его: после границы
• зависание активируется: перед границей текущего элемента и: перед границей его следующий родственный брат

Но ... даже если он работает лучше оригинала, область «margin» мертва, не реагируя на: зависание, любые идеи, как это можно исправить?

Обновленный код:

.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

Ive изменяли код и придумал это: 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; 
} 

удаления какой-контента после того, как и ориентации в мире до на парения.

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>