2

这是我有疑问的代码

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

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

4

4 回答 4

4

CSS2.1 规范的生成的内容、自动编号和列表部分解释了这一点：

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

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

于 2013-09-04T09:51:59.953 回答
2

两个撇号表示一个字符串。两个双引号也表示一个字符串，您使用哪个分隔符取决于偏好和转义需要；有关所有详细信息，请参见此处。

如果两个字符串分隔符之间没有任何内容，要么 要么''，""那么你有一个空字符串。如果您有除字符串之外的任何内容，则它是其他一些可能有效也可能无效的值。有关的所有可能值，请参见此处content。如果你传递了一个无效值，那么就像任何其他样式声明一样，浏览器将忽略它，并且没有任何有效值content将默认为normal，这实际上是none用于:before和:after伪元素。这将阻止您的伪元素显示。

于 2013-09-04T09:52:31.140 回答
1

要使用before和after元素，它需要有某种形式的内容才会显示该元素，所以你可以用一个空字符串来假装那里有东西，显然空格或空在页面上不会显示任何内容，所以您只需获得其余的 CSS 样式。

如果您删除 content 属性，那么它根本不会显示。

我想它可以用于“...”或“阅读更多”之类的东西，而不必在您的 html 标记中包含它。

于 2013-09-04T09:52:53.863 回答
1

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

您如何使用它将重复内容放在元素旁边，如下所示：

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

将导致：

作者：哈克贝利·费恩

于 2013-09-04T09:53:25.323 回答