背景

之前我总觉得，伪元素是一个很难理解，很复杂的事情，现在看来，就觉得简单了；

• 如果是::before,就是在这个元素前面加样式；
• 如果是::after,就是在这个元素的后面加样式；
• 给一个标题收货管理前面加一个蓝色的标示线，如下图所示；
  • 这就需要用到伪元素了；

标题的代码

<div class="title">收货管理</div>

• 先把这个收货管理的css样式调好；

 .title {
	 display: flex;
	 align-items: center;
	 font-size: 16px;
	 font-weight: 600;
	 color: #1e1f22;
	 height: 56px;
	 margin-left: 20px;
			
	 }

标题前面加一个蓝色的竖线

• 直接在这个class='title',里面加伪元素；

.title {
			display: flex;
			align-items: center;
			font-size: 16px;
			font-weight: 600;
			color: #1e1f22;
			height: 56px;
			margin-left: 20px;
			&::before {
				content: ' ';
				position: absolute;
				left: 20px;
				width: 4px;
				height: 16px;
				background-color: #2f7bff;
				border-radius: 2px;
			}
		}`

• 这个before里面，基本上是确定的样式。