伪类选择器
1. ::before 在元素内部的前面插入内容
2. ::after 在元素内部的后面插入内容
相关注意事项:
1)before 和 after 必须有 content 属性
2)before 在内容前面,after 在内容后面
3)before 和 after 创建的是一个元素,但是属于行内元素,因此如果想增加宽高属性,可以使用 display 将其转换成行内块或者块元素。
4)创建出来的元素在 Dom 中查找不到,所以称为伪元素
5)伪元素和标签选择器一样,权重为 1
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?cv013x');
src: url('fonts/icomoon.eot?cv013x#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?cv013x') format('truetype'), url('fonts/icomoon.woff?cv013x') format('woff'), url('fonts/icomoon.svg?cv013x#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
span {
font-family: 'icomoon';
position: absolute;
top: 10px;
right: 10px;
}
div,
p {
position: relative;
width: 249px;
height: 35px;
border: 1px solid red;
}
/* p::after {
content: '';
position: absolute;
top: 10px;
right: 10px;
font-family: 'icomoon';
} */
p::after {
content: '\ea50';
position: absolute;
top: 10px;
right: 10px;
font-family: 'icomoon';
}
</style>
</head>
<body>
<div>
<span></span>
</div>
<p></p>
</body>
</html>
参考文章:
https://blog.csdn.net/suwu150/article/details/55045987 IcoMoon图标字体的使用
https://www.cnblogs.com/rainman/p/5498255.html css:@font-face的使用方法
https://www.jianshu.com/p/dfbda24e343b 【css3】——用伪元素选择器操作icomoon图标