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;
}

有什么方法可以在之前和之后创建额外的东西 - 比如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';
}

Answer 2

正如Paulie_D评论你不能得到：之后：在CSS之后。

虽然你可以通过Chaining

在jQuery中完成

$("div").prepend(" *before* ").prepend(" *before before* ").append(" *after* ").append(" *after after* ");

请参阅JSFiddle here

虽然它使用jQuery 但它有点有效一个解决方案，实际上你应该只使用：之前和之后：样式的CSS选择器

使用CSS之前和之后创建div的内容

2 个答案: