加< hr />使用：after选择器 [英] Adding <hr/> using the :after selector

问题描述

我试图在页面中的每篇文章后自动添加水平规则。有没有办法使用：after选择器来做到这一点？我希望能够设置如下样式：

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

推荐答案

使用纯CSS是不可能的，但您可以使用边框和边距看起来像 hr ：

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

或者您可以使用JavaScript：

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)
}

在jQuery中更简单：

Or easier in jQuery:

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

这篇关于加< hr />使用：after选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！