擬似要素の余白を無視する前または後：

Question

罫線が表示され、強調表示されるように、指定された一般的なHTML要素の罫線に印を付けようとしています（そのCSSは自分の制御下にありません）ホバーオン。

私は現在、擬似要素を使用しています。これを達成するためにbeforeと：afterを使用していますが、余白に苦労しています。 JSではなく、CSSを使用する必要があります。

任意の2つの要素間に1行しかないのが目的ですが、余白があるため、段落「一部のコンテンツ」と「World」という見出しの間に罫線が重複して表示されます。

以下のスニペットに示すように、マーカークラスをラップdivに適用することも、クラス要素に直接適用することもできます。両方ともOKです。

.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を使用せずにホバーハイライト効果を維持しながら、単一の1の間の境界を「マージ」する方法をいくつか方法はありますか？

私はすべての後に：と：最初の要素だけの前に、しかしその場合、上の境界のホバー効果を失っているか、間違った場所に表示されています元のボーダー）。

---

UPDATE：

私は、次の概念と一緒にほとんど作業溶液を入れることができました。また、国境前

最後の要素が表示されます。

• 各要素は、そのを表示その：境界の後ろ
• ホバーはアクティブになります：現在の要素とボーダーの境界の前その次の兄弟

でも...オリジナルよりもうまく動作していても、「マージン」の領域は応答していません。ホバー、どのように修正できたのでしょうか？

更新コード：

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

をした後、いくつかのコンテンツを削除し、前の世界をターゲットにホバー。

Answer 2

兄弟セレクタを使用して、境界線:beforeのみを追加します。 はその後、あなたはそれぞれのdivのための1枠を使用していた: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>