有效的 CSS 内容

CSS 中有一个 content 属性，它旨在与 ::before 和 ::after 伪元素一起使用。它将内容注入到元素中。

这是一个例子

<div 
  data-done="&#x2705;"
  class="email">
    [email protected]
</div>

.email::before {
  content: attr(data-done) " Email: "; /* This gets inserted before the email address */
}

该属性通常接受您放入其中的任何内容。但是，它有一些无效的值无法接受。我最近听到有人对此感到困惑，所以我自己也尝试了一下，并了解了一些事情。

这可以正常工作

/* Valid */
::after {
  content: "1";
}

…但这个不行

/* Invalid, not a string */
::after {
  content: 1;
}

我不完全确定为什么，但我认为这是因为 1 是一个无单位的数字（即 1 与 1px），而不是字符串。你也无法欺骗它！我尝试过这样聪明地操作

/* Invalid, no tricks */
::after {
  content: "" 1;
}

但是，您可以从属性输出数字，正如您可能怀疑的那样

<div data-price="4">Coffee</div>

/* This "works" */
div::after {
  content: " $" attr(data-price);
}

但是当然，您永远不会将生成的内容用于诸如价格之类的重要信息，对吧？！（请不要这样做。它没有很好的可访问性，文本也无法选择。）

即使您可以获取和显示该数字，它也只是一个字符串。您无法真正对它进行任何操作。

<div data-price="4" data-sale-modifier="0.9">Coffee</div>

/* Not gonna happen */
div::after {
  content: " $" 
    calc(attr(data-price) * attr(data-sale-modifier));
}

您不能使用数字，无论如何

/* Nope */
::after {
  content: calc(2 + 2);
}

注意！不要尝试像在 PHP 或 JavaScript 中那样连接字符串

/* These will break */
::after {
  content: "1" . "2" . "3";
  content: "1" + "2" + "3";

  /* Use spaces */
  content: "1" "2" "3";
  /* Or nothing */
  content: "1 2 3";
  /* The type of quote (single or double) doesn't matter, but content not coming back from attr() does need to be quoted. */
}

规范中 有一项功能 可以将属性转换为实际类型，而不是将它们都视为字符串……

<wood length="12" />

wood {
  width: attr(length em); /* or other values like "number", "px", or "url" */
}

…但我相当肯定这还没有在任何地方起作用。此外，它对我们使用伪元素没有帮助，因为字符串已经可以工作，而数字不行。

通过电子邮件与我联系的人特别困惑为什么他们无法在 content 上使用 calc()。我不确定在这种情况下是否可以帮助您进行数学运算，但值得知道伪元素可以是计数器，并且这些计数器可以进行自己的有限形式的数学运算。例如，这是一个从 12 开始并在 DOM 中该级别上的每个元素递减 2 的计数器。

查看 CodePen 上 Chris Coyier 的笔 反向双重倒计时 (@chriscoyier)。

我们在这里没有提到的唯一其他事情是伪元素可以是图像。例如

p:before {
  content: url(image.jpg);
}

…但它受到奇怪的限制。您甚至无法调整图像大小。¯\_(ツ)_/¯

更常见的是使用空字符串作为值 (content: "";)，它可以执行诸如 清除浮动 之类的事情，还可以定位、调整大小并拥有自己的背景。