CSS3伪元素选择器
CSS3伪元素选择器有两种:分别是::before
和::after
,下面我们分别进行介绍
先介绍一下使用的注意事项:
1.他们本身就是一个元素(盒子),使用的时候相当于是在原先的div
所创建的盒子里增加新的“小盒子”。可以定义其属性但是默认的只是行内元素。
2.before
和after
所代表的盒子必须具有content
属性
3.before
表示在所给定的内容之前,after
表示在所给的内容之后;这里的内容是指原先的div
盒子里给定的content
里的内容。
4.在dome里面是看不见所创建的before和after元素的 ,所以称其为伪元素
5.伪元素和标签选择器一样,权重为1
接下来,我们举例讲解一下,首先给一个div
盒子作为研究对象,举例代码如下:
<div>爱</div>
假设我们想在"爱"这个字前面加上一个元素,并且里面写上"我"这个字,可以使用上面介绍的为元素选择器::before
,举例代码如下:
div::before {
content: "我";
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
}
备注:以上代码中的 display: inline-block;
是融合行内于块级,让其变成不独占一行的块级元素,在这里是为了展示div
“大盒子”里用伪元素选择器做出来的“小盒子”的内容位置和包含关系。(关于display: inline-block;
的说明,我会在后面其他博客中进行详细讲解)。
假设我们想在"爱"这个字后面加上一个元素,并且里面写上"中国",可以使用上面介绍的为元素选择器::after
,举例代码如下:
div::after {
content: "小猪佩奇";
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
}
display: inline-block;
的功能同上。
最后得到的结构布局如下图所示: