Adding using the :after selector

Question

I\'m trying to \"automatically\" add a horizontal-rule after each article in my page. Is there a way of doing this using the :after selector? I\'m hoping to be able to style it

Answer 1

This is impossible with pure CSS, but you could use a border and margins to look like a hr:

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

Or you could use JavaScript:

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

Or easier in jQuery:

$('article').after('
')