content 属性

含摘录，非原创
Content属性值
值 说明
none 设置Content，如果指定成Nothing
normal 设置content，如果指定的话，正常，默认是"none"（该是nothing）
counter 设定计数器内容
attr(attribute) 设置Content作为选择器的属性之一。
string 设置Content到你指定的文本
open-quote 设置Content是开口引号
close-quote 设置Content是闭合引号
no-open-quote 如果指定，移除内容的开始引号
no-close-quote 如果指定，移除内容的闭合引号
url(url) 设置某种媒体（图像，声音，视频等内容）
inherit 指定的content属性的值，应该从父元素继承

CSS 的 content 属性用于在元素的 ::before 和 ::after 伪元素中插入内容。使用 content 属性插入的内容都是匿名的可替换元素。

从上面看到它只能用于「伪元素」中，但其实它在 chrome 浏览器中，可用于任何元素。

<template>
  <div class="box"></div>
</template>
<style>
.box {
  content: url(https://picsum.photos/id/237/300/200);
}
</style>

不过除了chrome浏览器，其它浏览器并不支持直接在元素上使用，只能用在「伪元素」上。所以使用场景并不多。

相关链接：【CSS系列】被忽略的content属性