关于font-family和:before/:after

1.font-family——规定元素的字体系列

• 属性值为逗号隔开而成的优先表，浏览器会使用它可识别的第一个值，可以打乱下他们的顺序区分字体有何不同。
• 默认值为not specified，取决于浏览器
• 还有一个特殊的值为inherit：规定应该从父元素继承字体系列。

//css中
.content{
		font-family:Georgia,Arial,Verdana,Sans-serif,"Times New Roman",Serif
	}

//html中
<div class="whole">
	whole正常字体
	<div class="content">content大法师</div>
</div>
		

2.:before/:after伪元素——在元素后面添加图片或文字

• 在元素之前插入图片

//css中
.contentbox{
	text-indent: 30px;
}
/* :before在什么之前添加*/
.contentbox:before {
    content: '';
	background:url("img/image.jpg") no-repeat;
	background-size: 19px 24px;
	width:19px;
	height:24px;
	position:absolute;
	left: 0px;
	border: 1px solid red;
}
//html中
<div class="contentbox">钱</div>

效果图：

• 在元素之前插入文字

.contentbox:before {
    content: '陈';
	border: 1px solid red;
	color: yellowgreen;
	margin-right: 4px;
}

效果图

• 在vue项目中将font-family和element中的icon配合使用

	.beforeBox{
		font-family: element-icons!important;
	}
	.beforeBox:before {
	    content: "\e7a4";
	}

待续。。。