【uni-app 怎么写伪类，怎么在伪类中使用icon字体图标】

uni-app 怎么写伪类，怎么在伪类中使用icon字体图标

1.问题描述，为什么要写伪类

大家是否在写代码中经常遇到这样的事情，如果写一个价格标签￥2.50，符号要小写，价格要变颜色，那你的第一想法是不是写两个标签和两个样式分开放？那写伪类相对于就方便很多，只需要写一个标签一个类名，就能相当于三个标签使用

2.怎么写伪类

先给需要写伪类的标签一个相对定位，然后通过::before或者::after在标签的前面或者后面添加伪类，一个标签一个类完成了两件事

<template>
	<view>
		
		<view class="as">
			<text class="s">2.50</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

.as{
	margin: 50rpx;
}
.s{
	color:  #FE9236;
	font-size: 36rpx;
	position: relative;
}
.s::before{
	content: '￥';
	color: #333;
	font-size: 16rpx;
}
</style>

3.怎么在伪类中使用icon的打钩字体图标，首先你的引用icon字体图标，如何引用icon字体图标。

重点：在icon网页复制的图标代码是这样的 &#xe650 ;，在伪类中的content里使用只要一个反斜杠\e650即可，也就是 \ + 字体图标代码的后四位不用符号。

// 绝对定位，距离左边，距离顶部，颜色，字体图标，图标大小，样式

<style>
.s::after{
	position: absolute;
	margin-left: 30rpx;
	top: 8%;
	color: #4CD964;
	content: '\e650';
	font-size:20px;
	font-family:"iconfont" !important;
	font-style:normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	}
</style>

····博主标签的样式