【伪类与伪元素】用CSS伪元素（以:before为例）插入图片
对于一些小图标类型的图片，若使用<img>略微有些麻烦，iconfont是一个不错的选择用起来也相当灵活，但是所需要步骤较为繁琐，今天介绍一种使用css伪元素快速插入图标的小技巧。
效果图
伪类 与 伪元素
伪类
在网上很多篇博客中并未将这两个解释清楚，很多博客直接写到利用css伪类插入图片，这种说法严格来讲是错误的。
CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态[1]。
通俗来说就是：我们要在某个元素处于某种状态时为其添加某个样式，但是仅仅通过dom树又无法表示这种状态，此时可以通过伪类对其添加样式。比如当鼠标滑动过某个文字时将其变为红色，可使用伪类来实现：
<body><h1 class="title">伪类</h1><style type="text/css">.title:hover{color: red;}</style></body>
伪元素
伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式[2]
通俗来说：我们可以使用伪元素创建在dom树中并不存在（在HTML文档中未定义这个元素，）的元素。话不多说上示例代码：
<body><!-- 在HTML文档中只定义了一个元素 --><h1 class="title">HTML中定义的元素</h1><style type="text/css">.title:hover{color: red;}/* 通过伪类增加一个元素 */.title::before{content: "伪类定义的元素";font-size: 12px;color: blue;}</style></body>
案例说明
弄清楚伪类与伪元素的区别之后，那我们就用伪元素来添加小图标。
再看一眼效果图，我们要在 “5月14日” 前加上一个日历的小图标。
<view class="date-text"><text>5月14日</text></view>
<text>5月14日</text>被包裹在 class=“date-text” 这一 <view></view> 元素内部，所以需要在view内部创建一个图片伪元素，具体操作看注释咯。
.date-text {font-size: 28rpx;display: flex;margin: 0 20rpx;// scss 语法，相当于 .date-text::before&:before {content: '';display: block;// 定义元素位置margin-top: 12rpx;margin-right: 20rpx;// 定义元素宽高width: 36rpx;height: 36rpx;// background-image无法引用本地资源，故需要用网络地址background-image: url($url+'calendar.png');background-size: 100% 100%;}text {margin-top: 12rpx;}}
