Ignore margin for pseudo-elements: before or: after

Question

I am trying to mark the borders for a given set of common HTML elements (their CSS is not under my control) in such a way that the borders are visible and they stand out on hover.

I am currently using pseudo-elements: before and: after that, but I am struggling with fields. I need to use CSS for this, not JS.

The desired behavior is to have only one line between any two elements, but due to the margins the borders are duplicated between the paragraph “Some Content” and the heading “World”.

I can apply marker classes either to wrap divs or directly to class elements, as shown in the snippet below, and this is normal for me.

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

Run codeHide result

- "" , , JS ?

: after for all : , , ( , ).

---

UPDATE:

:

• :
• :
• hover : :

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

Hide result

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;
}

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>

Hide result