html - 使用 :before and :after 创建 div 的内容

Question

我有一个 div 元素，我想根据它的类向其中插入内容。

我可以使用 CSS 中的 :before 和 :after 属性将 2 个元素插入到此 div 中，但我需要能够插入至少 5 个元素。

这是我对 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;
}

有什么方法可以创建额外的 :before 和 :after 吗？类似于 div:after:after。

Answer 1

不，很抱歉你不能

有用的阅读: http://css-tricks.com/use-cases-for-multiple-pseudo-elements/

只需在您的元素中添加一些元素

HTML :

<div>
    <div>
    </div>    
</div>

CSS:

div:after {
    content:'1';
}
div > div:after {
    content:'2';
}