<hr/>を：afterセレクタを使用して追加する

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/HTMLではできません。次のようなスタイルにすることができます。ロジックを処理するには、Javascriptのような何らかのスクリプトが必要です。 jQueryので

：

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

Answer 3

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 4

私はこれは古い質問ですけど、（ボビーは接戦だったが）任意の正しいCSSのみの答えはまだありません考えると、私は私の2セントを追加します。

CSSを使用してHTMLタグをページに追加することはできません。しかし、同じ視覚効果を達成するためのCSSのみのソリューションがあります。

これを行うには::afterpseudo-elementを使用できます。これにより、指定された要素の後に要素が作成されます。この場合はarticleです。 content: ''を使用して

たちは、スタイル我々の選択のheightで、スクリーン（width:100vw）の全体の幅に合わせて（この場合の唯一1px）と我々が行うためにそれをbackground-colorを与える空の要素を与えますそれは線として見える。 position:absoluteとleft:0を使用すると、ラインは常に画面の左側に固定され、画面と同じ幅であるため、常にライン全体に広がります。

画面全体にまたがって表示したくない場合は、100vwの代わりに100%を使用して、内部に配置する要素をすべてスパンにすることができます。 （これはこの例ではarticle要素の親になります）。

article { 
    position: relative; 
} 

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