Adding <hr/> using the :after selector

CSS only solution

article {
    position: relative;
}

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

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('<hr/>')