Ignore margin for pseudo-elements :before or :after

Question

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

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

The desired behavior is to only have a single line between any two elements, but because of the margins, the borders are duplicated between paragraph "Some content" and heading "World".

I am able to apply marker classes either to wrapping divs or directly to class elements as shown in the below snippet, both is OK 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> 

Is there some way how to "merge" the borders between to a single one while preserving the hover highlight effect without using JS to place the border lines?

I have tried using :after for all, and :before only for the very first element, but in that case I am either loosing the hover effect for the top border, or it displays in wrong location (same problem as with original borders).

---

UPDATE:

I was able to put together almost working solution with the following concept:

• Each element displays its :before border
• The last element displays also its :after border
• hover activates :before border of current element and :before border of its next sibling

But ... even that it works better than original, the "margin" area is dead, not responding to :hover, any ideas how it could be fixed?

Updated code:

 .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 edited your code and came up with this: 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;
}

removing the some-content after and targeting the WORLD before on hover.

Answer 2

Only add a border :before , using sibling selectors. Then give an :after border to the :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>