知识储备
伪元素： 伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。伪元素主要有：
- ::first-letter 第一个字母的样式
- ::first-line 首行文字的样式
- ::before 元素头部添加的修饰
- ::after 元素尾部添加的修饰
- ::placeholder input的占位符样式
- ::selection 被选中元素的样式
其实吧，我觉得伪元素可以解释为元素的修饰，可以为元素带来额外的附加样式，属于额外的文档结构。
伪类： 用来表示无法在CSS中轻松或者可靠检测到的某个元素的状态或属性，比如a标签的hover表示鼠标经过的样式，visited表示访问过的链接的样式，更多的用来描述元素状态变化时的样式，伪类主要有：
- :link
- :visited
- :hover
- :active
- :focus
- :lang(fr)
- :not(s)
- :root
- :first-child
- :last-child
- :only-child
- :nth-child(n)
- :nth-last-child(n)
- :first-of-type
- :last-of-type
- :only-of-type
- :nth-of-type(n)
- :nth-last-of-type(n)
- :empty
- :checked
- :enabled
- :disabled
- :target
我们利用css伪类和伪元素可以实现很多强大的视觉效果，这里我主要说下伪元素的使用
这里面有个 :root ，很重要。 好像说是级别挺高的（比html都高），我见网上好多文章都把他用来为css（全局）自定义变量做贡献。
:root{--back-color:#ccc;}，css里自定义变量名前面要加“- -”
实战
看下实现的图标——搜索图标：
/* html */
<span class="search"></span>
/* css */
.search{
position: relative;
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid #ccc;
text-align: center;
transform: rotate(-45deg);
&::after{
content: '';
display: inline-block;
width: 1px;
height: 4px;
background-color: #ccc;
}
}里面有个“&”是啥意思？
这其实是sass的语法：代表（嵌套的）上一级选择器。
上面那一行实际上写在外面就是：.search::after{...}。
在JS中，其实和this作用差不多。。。
