Html 使用 :before 和 :after 创建 div 的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21402419/
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
Create contents of div using :before and :after
提问by Tom
I have a single divelement which I want to insert content into depending on it's class.
我有一个div元素，我想根据它的类将内容插入其中。
I am able to insert 2 elements into this divusing the :beforeand :afterattributes in the CSS, but I need to be able to insert at least 5 elements.
我可以div使用CSS 中的:before和:after属性将 2 个元素插入其中，但我需要能够插入至少 5 个元素。
Here's what I have for 2:
这是我对 2 的看法：
div {
background: blue;
margin: 0 auto;
width: 50px;
height: 50px;
padding: 0;
display:table-cell;
vertical-align:middle;
text-align: center;
}
div:after {
content:'';
display:block;
border:1px solid #000;
width:40px;
height:40px;
margin:5px auto;
background-color:#DDD;
}
div:before {
content:'';
display:block;
border:1px solid #000;
width:40px;
height:40px;
margin:5px auto;
background-color:#DDD;
}
Is there any way I can create extra :beforeand :after? Something like div:after:after.
有什么办法可以创建额外的:before和:after吗？类似的东西div:after:after。
回答by l2aelba
Nope, Sorry you can't
不，对不起，你不能
Useful to read :http://css-tricks.com/use-cases-for-multiple-pseudo-elements/
有用的阅读：http : //css-tricks.com/use-cases-for-multiple-pseudo-elements/
Just add some element inside your element
只需在元素中添加一些元素
HTML :
HTML :
<div>
<div>
</div>
</div>
CSS :
CSS :
div:after {
content:'1';
}
div > div:after {
content:'2';
}
回答by S..
As Paulie_D comments you can't get :after:after in CSS.
正如 Paulie_D 评论的那样，您无法在 CSS 中获得 :after:after 。
Although you could do it in jQuery by Chaining
虽然你可以通过链接在 jQuery 中做到这一点
$("div").prepend(" *before* ").prepend(" *before before* ").append(" *after* ").append(" *after after* ");
See JSFiddle here
Although it uses jQueryit's a bit more valida solution, as really you should just use :before and :after CSS selectors for styling.
虽然它使用 jQuery，但它是一个更有效的解决方案，因为实际上你应该只使用 :before 和 :after CSS 选择器来设置样式。
