content

Avatar of Sara Cope
Sara Cope

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

CSS 中的 content 属性与伪元素 ::before::after 结合使用。它用于字面插入内容。它可以有四种值类型。

字符串

.name::before {
  content: "Name: ";
}

然后像这样的元素

<div class="name">Chris</div>

将呈现为这样

Name: Chris

它也可以是空字符串,这在诸如 clearfix 之类的东西中很常见。

计数器

div::before {
  content: counter(my-counter);
}

有关此内容的更多信息。

图像

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

这实际上是页面上的一个图像,就像 一样。它也可以是渐变。请注意,以这种方式插入时,您无法更改图像的尺寸。您还可以通过对内容使用空字符串来插入图像,使其以某种方式 display: block,对其进行大小调整,并使用 background-image。这样,您可以使用 background-size 调整其大小。

属性

您可以使用直接从 HTML 属性中获取的值(字符串)。

<div data-visual-label="Widget Rating">60</div>
[data-visual-label]::before {
  content: attr(data-visual-label) ": ";
}

/* Classic print trick! Show URLs! */
@media (print) {
  a[href]::after {
    content: " (" attr(href) ") "; /* you could combine a url() in here even if you wanted */
  }
}

attr() 函数目前还没有“类型”,因此您不能传递像 20px 这样的值(仅字符串),但总有一天会有的!

替代文本

规范指出,您可以在语法中使用 / 来列出替代文本。例如…

.el::before {
  content: "⭐️" / "Alternate Text for that star";

  content: "→" / ""; /* Visual only, don't read. */
}

也许您可以像这样使用它…

<ul aria-label="To Do List">
  <li>Make Bed</li>
  <li data-alt-pseudo="Completed">Grocery Shop</li>
  <li>Sweep Driveway</li>
</ul>
[data-alt-pseudo="Completed"]::before {
  content: "✅"; /* fallback */
  content: "✅" / attr(data-alt-pseudo);
}

更多信息

以这种方式插入的内容实际上不在 DOM 中,因此它有一些限制。例如,您不能直接(仅)将事件附加到伪元素。以这种方式插入的文本是否被屏幕阅读器读取(现在通常是)或是否可以选择它(现在通常不是)也不一致。

浏览器支持

此浏览器支持数据来自 Caniuse,其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
429123.1

移动/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
1271272.13.2

对于 Opera,url() 仅在 7 版及更高版本中受支持。