CSS content属性介绍

CSS中主要的伪元素有四个:before、after、first-letter、first-line
在before、after伪元素选择器中，常用来清除浮动，有一个content属性，能够实现页面中的内容插入

纯文本插入

---

效果如下:

代码如下:

/*css*/
h1:after{
    content: " World"
}
h2:before{
    content: "Leo "
}
<!-- html -->
<h1>Hello</h1>
<h2>Angel</h2>

插入文字符号

---

可以使用content属性的open-quote属性值和close-quote属性值在字符串两边添加诸如括号、单引号、双引号之类的嵌套文字符号。open-quote用于添加开始的文字符号，close-quote用于添加结束的文字符号，效果如下:

代码如下:

/*css*/
h1{
    quotes: "(" ")";
}
h2{
    quotes: "[" "]";
}
h1:before,h2:before{
    content: open-quote;
}
h1:after,h2:after{
    content: close-quote;
}
<!-- html -->
<h1>Hello World</h1>
<h2>Leo Angel</h2>

插入图片

---

content可以在元素前|后插入图片，效果如下:

代码如下:

/*css*/
h3:before,h3:after{
    content: url("http://localhost:4000/css/images/logo.jpg");
}
<!-- html -->
<h3>Picture</h3>

插入元素的属性值

---

content属性可以直接利用attr获取元素的属性，将其插入到对应位置
代码如下:

/*css*/
a:after{
    content:attr(href);
}
<!-- html -->
<a href="https://luckyw.cn">Home</a>

暂时介绍这么多，这些比较常用，以后有见到别的再整理到这里