::before和::after伪元素加content属性可以用来做很多特殊的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
.breadcrumb {
font-size: 1.6rem;
color: #333;
}
.breadcrumb a:first-child {
color: #82fcfd;
}
.breadcrumb a:first-child::before {
content: " » ";
}
.breadcrumb a::after {
content: " /";
color: #ef6eae;
}
.breadcrumb a:last-child::after {
content: "";
}
</style>
<body>
<div class="breadcrumb">
<a>程序员</a>
<a>前端</a>
<a>教程</a>
</div>
</body>
</html>