1 伪类和伪元素

伪元素在CSS3之前就已经存在，只是没有伪元素的说法，都是归纳为伪类，所有很多人分不清楚伪类和伪元素。比如常用的:before和:after，它们是伪类还是伪元素？其实在CSS3之前被称为伪类，直到CSS3才正式区分出来叫伪元素

那如何区分伪元素和伪类，记住两点：

伪类：表示被选择元素的某种状态，例如:hover

伪元素：表示被选择元素的某个部分，这个部分看起来像独立的元素，但是是假元素，只存在于css中，例如:after

核心区别在于，是否创造新的元素

2 深入`::before`和`::after`

::before和::after可以添加到选择器以创建伪元素的关键字。伪元素被插入到与选择器匹配的元素内容之前或之后。

content属性

::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容
::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空
这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入，所以尽量使用它们显示修饰性的内容
content可取以下值

string

使用引号一段字符串，将会向元素内容中添加字符串，例如给书名添加书名号

1
2
3
4
5
6
7
8
9


p::before {
	content: "《",
	color: #000,
}
p::after {
	content: "》"，
	color: #000
}
<p>这是书名</p>

attr()

通过attr()调用当前元素的属性，比如将图片alt提示文字或者链接的href地址显示出来

1
2
3
4
5


a::after{
    content: "【" attr(href) "】";
}

<a href="https://www.baidu.com/">百度地址</a>

url()/uri()

用于引用媒体文件，比如引入图片

1
2
3
4


a::before{
    content: url("img/baidu_logo.gif");
}
<a href="https://www.baidu.com/">百度地址</a>

注意

url不能使用引号，否则将成为字符串形式插入文本
通过content属性直接引入的图片是无法直接修改（width,height）大小的
- 解决方案：将content写为空，再用background:url()来添加图片

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


/*伪元素添加图片：*/
.wrap:after{
    /*内容置为空*/
    content:"";
    /*设置背景图，并拉伸*/
    background:url("img/06.png") no-repeat center;
    /*必须设置此伪元素display*/
    display:inline-block;
    /*必须设置此伪元素大小（不会被图片撑开）*/
    background-size:100%;
    width:100px;
    height:100px;
}

苹果端伪元素不生效，img、input和其他的单标签是没有:after和:before伪元素的（在部分浏览器中没有，如苹果端会发现无效），因为单标签本身不能有子元素。
- 解决方案：给img包一个div可以解决
想要动态改变伪元素的图片，可以给当前元素添加伪元素图片的基础样式，再动态class来写伪元素的图片。

3 解决伪元素添加伪类的问题

需求：给元素的伪元素添加hover伪类

解决：注意定义顺序，伪类(hover)在前，伪元素(after)在后

1
2
3


li:hover::after {
	border: 1px solid red;
}

Contents