content这个css属性被用于before和after这两个伪元素去产生放在元素内的内容。而所有元素都可以用content这个属性的url()值和其他的图片值用于替换元素本身的内容。用content属性被插入的对象是匿名的替换对象。
content有如下几种值：
1、content: normal;
2、content: none;
以上这两种值不能和其他的值一起用。其他的值可以同时混用，如：content: open-quote counter_name;
3、content: url("http://www.example.com/test.png");
这种url值可以替换所有元素本身已经有的内容。
eg: <div class="example">hahaha</div>
.example {
content: url("http://www.baidu.com/test.png");
}
原本的内容hahaha被替换成了链接上的图片。(个人感觉只是content的内容把原来的内容覆盖了)
4、content: linear-gradient(#e66465, #9198e5);
这种图片属性的值和url值一样可以替换所有元素本身已经有的内容。
eg: <div class="example">hahaha</div>
.example {
content: linear-gradient(#e66465, #9198e5);
}
原本的内容hahaha被渐变色充满整个元素。
以下这些属性值只适用于before和after伪元素：
5、content: "放任意的字符串";
eg: content: "hello";
6、content: counter(counter_name);
7、content: attr(HTML attribute name);
eg: <div class="example" test="123">hahaha</div>
.example:before {
content: attr(test);
}
原本的内容hahaha被属性test的值123覆盖。
8、content: open-quote; 前影号
content: close-quote;后影号
content: no-open-quote;不要前影号
content: no-close-quote;不要后影号
(emmm,个人还不太明白这个不要前后影号是要干啥。。。)
9、一些全局值，也不太明白是用来干啥的
content: inherit;
content: initial;
content: usnet;