Adding <hr/> 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 something like this:

article {     padding: 10px; }  article:after {     content: <hr/>; } 

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