css伪元素的应用（超实用的图标库）

知识储备

伪元素： 伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。伪元素主要有：

• ::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作用差不多。。。