auto 且元素有固有高度，则 height 的使用值为该固有高度；auto 且元素有固有高度，则 height 的使用值为该固有高度；auto 且宽度有 非auto 的计算值，并且元素有固有宽高比，则 height 的使用值为：宽度使用值 / 固有宽高比；auto 且上述条件完全不符，则 height 的使用值 不能大于150px，且宽度不能大于长方形高度的2倍定义：content 属性与 :before 及 :after 伪元素配合使用，在元素头或尾部来插入生成内容。该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的盒子类型可以用属性 display 控制
content: normal /* Keywords that cannot be combined with other values */
content: none
content: 'prefix' /* <string> value, non-latin characters must be encoded e.g. \00A0 for */
content: url(http://www.example.com/test.html) /* <uri> value */
content: chapter_counter /* <counter> values */
content: attr(value string) /* attr() value linked to the HTML attribute value */
content: open-quote /* Language- and position-dependant keywords */
content: close-quote
content: no-open-quote
content: no-close-quote
content: open-quote chapter_counter /* Except for normal and none, several values can be used simultaneously */
content: inheritcontent: <string> value 字符串
可以加入任何字符，包括 Unicode 编码等各种字符
<a class="demo" href="#" title="content">content</a>
<style>
.demo:after{
content: "↗"
}
</style>可以通过 content 内字符串的变化，实现类似 加载中... 的动画效果
.demo:after{
animation: dot 1.6s linear both;
}
@keyframe dot{
0%{ content: "." }
33%{ content: ".." }
66%{ content: "..." }
100%{ content: "." }
}steps阶梯函数实现元素位移
<a class="demo" href="#" title="content">content<dot>...</dot></a>
<style>
dot {
display: inline-block;
height: 1em;
line-height: 1;
text-align: left;
vertical-align: -.25em;
overflow: hidden;
}
dot::before {
display: block;
content: '...\A..\A.';
white-space: pre-wrap;
animation: dot2 1.6s infinite step-start both;
}
@keyframes dot2 {
33% {
transform: translateY(-2em);
}
66% {
transform: translateY(-1em);
}
}
</style><url> value 外部资源
用于引用媒体文件，图片，图标，SVG等
.demo:after{
content: url(https://img.png);
}受 background-image: url() 可以用渐变实现背景启发，类似的，一些函数是不是可以放在 content 中来实现
.demo:after {
content: radial-gradient(circle at 35% 35%, white 10%, pink 70%);
display: inline-block;
border-radius: 50%;
width: 100px;
height: 100px;
overflow: hidden;
}content: attr() value属性值的引用：调用当前元素的属性，可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来
.demo:after{
content: attr(href);
}
.demo:after{
content: attr(class);
}content: <counter> values：调用计数器，可以不使用列表元素实现序号功能。具体请参见 counter-increment 和 counter-reset 属性的用法
<h1>大标题</h1>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
<h1>大标题</h1>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>h1::before{
content:counter(h1)'.';
}
h1{
counter-increment:h1;
counter-reset:h2;
}
h2::before{
content:counter(h1) '-' counter(h2);
}
h2{
counter-increment:h2;
counter-reset:h3;
margin-left:40px;
}
h3::before{
content:counter(h1) '-' counter(h2) '-' counter(h3);
}
h3{
counter-increment:h3;
margin-left:80px;
}引用符号：属于引用符号的取值有 4 种，共 2 对，在 CSS 中用了语义较为清晰的关键词来表示： open-quote、 close-quote、no-open-quote、no-close-quote
默认
.demo::before {
content: open-quote;
}
.demo::after {
content: close-quote;
}自定义引用符号
.demo {
quotes: "『" "』";
}
.demo::before {
content: open-quote;
}
.demo::after {
content: close-quote;
}quotes 可以设置多组引用符号，用以应对次级引用
.demo {
quotes: "?" "?" "?" "?";
}
.demo::before {
content: no-open-quote open-quote;
}
.demo::after {
content: close-quote;
}总结：CSS 的 content 一般用在 ::before/after 这类的伪元素中。并且如果 ::before 和 ::after 元素如果不设置 content 属性的话，也是没有效果的
| 序号 | 属性 | 用法 |
|---|---|---|
| 1 | ‘字符串‘ | content: ‘xxx‘ 单纯显示内容。一般在文字的前后添加内容或者图标。 |
| 2 | attr() |
content: attr(attributes) 动态显示对应标签的属性 |
| 3 | url() |
content: url(url) 插入图片 |
| 4 | counter() |
content: counter(name) counter 的 name 可以自己定义。需要配合 counter-increment 和 counter-reset 一起使用。 |
| 5 | open-quote 和 close-quote |
content: open-quote; 实现自定义的引号，一般用来匹配多语言的情况。 |
attribute 和 property。不过从两者的所属关系上来说： property 属于 DOM Object，而 atrribute 属于 HTML原文：https://www.cnblogs.com/EricZLin/p/12105195.html