css - 请解释 : content :'' ;

Question

这是我有疑问的代码

.store {
  display: block;
  position: relative;
}
.store:before, .store:after {
  display: block;
  position:absolute;
  content:'';
}
.store:before {
  background: url(store-before.png);
  height: 23px;
  width: 54px;
  top:-3px;
  left:-3px;

}
.store:after {
  background: url(store-after.png);
  height: 20px;
  width: 41px;
  bottom:-3px;
  right:-3px;
}

我注意到，当“内容”是两个撇号以外的任何内容时，前后图像都不会显示。有人可以解释两个撇号的含义吗？谢谢。

Answer 1

Generated content, automatic numbering, and lists CSS2.1 规范的部分解释了这一点:

Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content. The 'content' property, in conjunction with these pseudo-elements, specifies what is inserted.

content 是添加到页面的内容。如果未指定 content，则不会向页面添加任何内容(意味着最终不会应用任何样式)。 content: '' 向页面添加空字符串内容。