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

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

作者使用：before和：after伪元素指定生成内容的样式和位置。正如其名称所示，：before和：after伪元素指定元素文档树内容之前和之后的内容位置。 'content'属性与这些伪元素一起指定插入的内容。

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

Answer 2

两个撇号表示一个字符串。两个双引号也表示一个字符串，你使用的分隔符取决于偏好和逃避需求;有关所有详细信息，请参阅here。

如果两个字符串分隔符（{1}}或''之间没有任何内容，则表示您有一个空字符串。如果除了字符串之外还有其他任何内容，那么它的某些其他值可能有效，也可能无效。有关""的所有可能值，请参阅here。如果您传递的值无效，那么浏览器会忽略它，并且没有任何有效值content将默认为content，normal对于{{none 1}}和:before伪元素。这将阻止你的伪元素显示。

Answer 3

要使用before和after元素，它需要在显示元素之前有某种形式的内容，所以你可以使用一个空字符串来伪装成某个东西，显然空格或空格都不显示页面，所以你只需要获得其余的css样式。

如果删除内容属性，则根本不会显示。

它意味着用于“...”或“阅读更多”之类的东西，我想你的html标记就不用了。

Answer 4

您的特定代码段可能正在使用它进行清除。

如何使用它将重复内容放在元素旁边：

span:before{
content:"Author: "
}
<span>Huckleberry Finn</span>

将导致：

作者：Huckleberry Finn

请解释：内容：'';

4 个答案: