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网页复制的图标代码是这样的  ;,在伪类中的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>
····博主标签的样式