Html 使用 :after 选择器添加 <hr/>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20736211/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding <hr/> using the :after selector
提问by dvn928361
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:
我正在尝试“自动”在我的页面中的每篇文章之后添加一条水平规则。有没有办法使用 :after 选择器来做到这一点？我希望能够像这样设计它：
article {
padding: 10px;
}
article:after {
content: <hr/>;
}
回答by Doorknob
This is impossible with pure CSS, but you could use a border and margins to look like a hr:
这在纯 CSS 中是不可能的，但您可以使用边框和边距看起来像hr：
article {
margin: 3px 0px;
border-bottom: 1px solid black;
}
Or you could use JavaScript:
或者你可以使用 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:
或者在 jQuery 中更简单：
$('article').after('<hr/>')
回答by Bobby
CSS only solution
仅 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;
}
回答by Tijmen
I know this is an older question, but considering there aren't yet any correct CSS-only answers (although Bobby was close), I'll add my two cents.
我知道这是一个较老的问题，但考虑到还没有任何正确的仅 CSS 答案（尽管 Bobby 很接近），我会加上我的两分钱。
You cannot use CSS to add HTML tags to a page. However, there is a CSS-only solution to achieve the same visual effect.
您不能使用 CSS 向页面添加 HTML 标签。但是，有一种仅使用 CSS 的解决方案可以实现相同的视觉效果。
You can use the ::afterpseudo-element to do this. This creates an element after the specified element, in this case the article.
您可以使用::after伪元素来执行此操作。这将在指定元素之后创建一个元素，在本例中为article.
Using content: ''gives an empty element, which we then style to fit the whole width of the screen (width:100vw), with a heightof our choice (in this case only 1px) and we give it a background-colorin order to make it visible as a line. Using position:absoluteand left:0ensures the line will always stick to the left side of the screen, and because it is as wide as the screen, it will always span the entire width.
Usingcontent: ''给出了一个空元素，然后我们将它的样式设置为适合屏幕的整个宽度 ( width:100vw)，带有height我们选择的 a （在这种情况下仅1px），我们给它 abackground-color以使其作为一条线可见。使用position:absolute和left:0确保线条始终贴在屏幕的左侧，并且因为它与屏幕一样宽，所以它始终跨越整个宽度。
If you don't want the line spanning the entire screen, you can use 100%instead of 100vwto make it span accross whatever element you put it inside. (That would be the articleelement's parent in this example).
如果您不希望这条线跨越整个屏幕，您可以使用100%而不是100vw让它跨越您放置在其中的任何元素。（article在本例中，这将是元素的父元素）。
article {
position: relative;
}
article::after {
content: '';
position: absolute;
width: 100vw;
height: 1px;
left: 0;
display: block;
clear: both;
background-color: black;
}
回答by Krishna Naidu
Try this ..
尝试这个 ..
yourclass:before {
content: "";
border-left: 2px solid green;
height: 28px;
margin-right: 15px;
}
回答by Mike R
No you cannot with pure CSS/HTML. You would need some sort of scripting such as Javascript to handle the logic.
不，您不能使用纯 CSS/HTML。您需要某种脚本（例如 Javascript）来处理逻辑。
Using JQuery:
使用 JQuery：
$(document).ready(function() {
$("article").after("<hr>");
});
