CSS3 中伪元素 Content 属性详解

发布于 2020-05-28阅读 560

Content 可取的值
普通字符
unicode
attr 函数
url 函数
counter 函数
css 变量
一、普通字符
content: "我是文字内容";
二、Unicode

浏览器自带的特殊字符

p:after {
    content: "\02691";
}
三、 Attr 函数

顾名思义，这个函数可以获取 html元素中某一属性的值，如 id、class、style 等

<p data-content="我是文字内容"></p>
<style>
    p:after {
        content: attr(data-content);
    }
</style>
四、Url 函数

显示图片，缺点就是无法控制图片的大小。

p:after {
    content: url("../images/cat.jpg");
}
五、Counter 函数

counter 函数的作用是插入计数器的值，配合 content 属性可以把计数器里的值显示出来，介绍用法之前，得先熟悉两个属性 counter-reset 跟 counter-increment。

counter-reset 的作用是定义一个计数器：

counter-reset: count1 0; // 声明一个计数器count1，并从0开始计算
counter-reset: count2 1; // 声明一个计数器count2，并从1开始计算
counter-reset: count3 0 count4 0 count5 0; // 声明多个计数器

counter-increment 使计数器的值递增，可以理解成 javascript 中的 +=：

counter-reset: count 0;
counter-increment: count 2; // 使count自增2，当前count的值为2
counter-increment: count -2; // 使count自增-2，当前count的值为-2
// 注意，这里的计数器count的值为什么不是变回了0，可以理解成样式覆盖

具体实例详见 第六条 css 变量。

六、CSS 变量

显示变量的时候，如果变量是 string 类型则可以直接显示，如果是 int 类型，则需要借用 counter 函数。

// string类型
--name: "Web Tips";

p:after {
    content: var(--name);  // 显示为"Web Tips"
}

---------- 我是分割线 ----------

// int类型
--count: 60;

p:after{
    // 声明一个计数器名为 counter , 从60开始计数
    counter-reset: counter var(--count); 
    // 使 count 自增 -2 ，当前为58
    counter-increment: counter -2;
    // 显示counter 计数器的值为"58"
    content: counter(counter ); 
}

---------- 我是分割线 ----------

//  不支持的类型及情况
--count: 60.5;  // 显示为"0"，不支持小数
--count: 60px;  // 显示为""，不支持css属性值
七、其它小知识点

普通字符串拼接：

content: "xxx" + "xxx";

字符串拼接函数：

// 不能使用 + 连接符，也可以不需要空格，这里只是为了区分
content: "我支持" attr(xx);
count: "我的头像：" url("xxxxx");
content: "计数器的值为：" counter(xx);

隐性转换：

content: 0; // 显示为""
content: "" + 0; // 显示为"0"
content: "" + attr(name); // 显示为"attr(name)"

来源：https://juejin.im/post/5d5638fff265da03cd0a7a51，知识点+1，感谢原作者的分享！

属性