元素的content属性

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;

 

转载于:https://www.cnblogs.com/coconutGirl/p/9554663.html