Question

我正试图在页面中的每篇文章后“自动”添加水平规则。有没有办法使用：after选择器执行此操作？我希望能够为它设计这样的样式：

article {
    padding: 10px;
}

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

Answer 1

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

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

或者您可以使用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中更容易：

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

Answer 2

仅CSS解决方案

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 3

我知道这是一个较老的问题，但考虑到还没有任何正确的CSS答案（尽管Bobby很接近），我会加上我的两分钱。

您无法使用CSS向页面添加HTML标记。但是，有一种仅支持CSS的解决方案可以实现相同的视觉效果。

您可以使用::after pseudo-element 执行此操作。这会在指定元素之后创建一个元素，在本例中为article。

使用content: ''会给出一个空元素，然后我们将其设置为适合屏幕的整个宽度（width:100vw），并选择height（在这种情况下仅{ {1}}）我们给它一个1px，以便将其显示为一行。使用background-color和position:absolute可确保线条始终贴在屏幕的左侧，并且因为它与屏幕一样宽，所以它将始终跨越整个宽度。

如果您不希望该行跨越整个屏幕，则可以使用left:0代替100%使其跨越您放入其中的任何元素。（在这个例子中，这将是100vw元素的父元素。）

article

Answer 4

不，你不能使用纯CSS / HTML。您需要某种脚本（如Javascript）来处理逻辑。

使用JQuery：

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

Answer 5

试试这个..

yourclass:before {  
    content: "";
    border-left: 2px solid green;
    height: 28px;
    margin-right: 15px;
}

Answer 6

或者这个，对于类似的结果：

article:after{
    content :"";
    display: block;
    width: 20px;
    height: 2px;
    background: red;
}

使用：after选择器添加<hr />

6 个答案: