Добавление <hr/"> с помощью: после селектора

Я пытаюсь "автоматически" добавлять горизонтальное правило после каждой статьи на моей странице. Есть ли способ сделать это, используя: после селектора? Я надеюсь, что смогу придумать что-то вроде этого:

article {
    padding: 10px;
}

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

Ответы

Ответ 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/>')

Ответ 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;
}

Ответ 3

Я знаю, что это старый вопрос, но, учитывая, что пока нет правильных ответов только для CSS (хотя Бобби был близок), я добавлю два своих цента.

Вы не можете использовать CSS для добавления тегов HTML на страницу. Тем не менее, существует CSS-решение для достижения того же визуального эффекта.

Вы можете использовать ::after псевдо-элемент, чтобы сделать это. Это создает элемент после указанного элемента, в данном случае article.

Использование content: '' дает пустой элемент, который мы затем стилем, чтобы соответствовать всей ширине экрана (width:100vw), с height по нашему выбору (в данном случае только 1px), и мы присваиваем ему background-color в чтобы сделать его видимым в виде линии. Использование position:absolute и left:0 гарантирует, что линия всегда будет прилипать к левой стороне экрана, а поскольку она равна ширине экрана, она всегда будет охватывать всю ширину.

Если вы не хотите, чтобы линия охватывала весь экран, вы можете использовать 100% вместо 100vw чтобы охватить любой элемент, внутри которого вы ее поместили. (Это будет родительский элемент article в этом примере).

article {
    position: relative;
}

article::after {
    content: '';
    position: absolute;
    width: 100vw;
    height: 1px;
    left: 0;
    display: block;
    clear: both;
    background-color: black;
}

Ответ 4

Нет, вы не можете с чистым CSS/HTML. Вам понадобится какой-то сценарий, такой как Javascript, для обработки логики.

Использование JQuery:

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