Hinzufügen <hr/> mit den: nach Selektor

Question

Ich versuche, „automatisch“ Nach jedem Artikel in meiner Seite eine horizontale-Regel hinzuzufügen. Gibt es eine Möglichkeit, dies zu tun mit dem: nach Selektor? Ich hoffe, in der Lage zu sein, es so etwas zu stylen:

article { 
    padding: 10px; 
} 

article:after { 
    content: <hr/>; 
} 

Answer 1

Das ist unmöglich mit reinem CSS, aber man konnte eine Grenze und Margen, um zu sehen wie ein hr:

article { 
    margin: 3px 0px; 
    border-bottom: 1px solid black; 
} 

Oder Sie könnten verwenden JavaScript:

var articles = document.getElementsByTagName('article') 
for (var i = 0; i < articles.length; i ++) { 
    articles[i].parentNode.insertBefore(document.createElement('hr'), articles[i].nextSibling) 
} 

Oder einfacher in jQuery:

$('article').after('<hr/>') 

Answer 2

Nein, Sie können nicht mit reinem CSS/HTML. Sie benötigen eine Art von Skripting wie Javascript, um die Logik zu handhaben.

In JQuery:

$(document).ready(function() { 
    $(article).after("<hr>"); 
}); 

Answer 3

CSS einzige Lösung

article { 
    position: relative; 
} 

article:after { 
    content: ''; 
    position: absolute; 
    width: 100%; 
    height: 1px; // suit your need 
    background: black; // suit your need 
    top: 100%; 
    left: 0; 
} 

Answer 4

Ich weiß, das ist eine ältere Frage, aber wenn man bedenkt es gibt noch keine korrekte CSS-only Antworten (obwohl Bobby nah war), ich werde meine zwei Cent hinzufügen .

Sie können CSS verwenden HTML-Tags auf einer Seite hinzuzufügen. Es gibt jedoch nur eine CSS-Lösung, um den gleichen visuellen Effekt zu erzielen.

können Sie verwenden die ::afterpseudo-element dies zu tun. Dadurch entsteht ein Element nach dem angegebenen Elemente, in diesem Fall der article.

content: '' Verwendung gibt ein leeres Element, das uns Stil dann die ganze Breite des Bildschirms passen (width:100vw) mit einem height unserer Wahl (in diesem Fall nur 1px) und wir geben ihm ein background-color zu machen, um Es ist als Linie sichtbar. Mit position:absolute und left:0 sorgt die Linie immer auf der linken Seite des Bildschirms bleiben wird, und weil es so breit wie der Bildschirm ist, es wird immer die gesamte Breite erstrecken.

Wenn Sie nicht möchten, dass die Zeile den gesamten Bildschirm einnimmt, können Sie 100% anstelle von 100vw verwenden, damit es sich über jedes Element erstreckt, in das Sie es einfügen. (Das wäre die Eltern article Elements in diesem Beispiel).

article { 
    position: relative; 
} 

article::after { 
    content: ''; 
    position: absolute; 
    width: 100vw; 
    height: 1px; 
    left: 0; 
    display: block; 
    clear: both; 
    background-color: black; 
}