前言

前两天看文档看到选择器那块儿的时候，前面4个基本都能理解：.class，#id，element，element, element，但后面两个::after和::before（文档中说，分别表示在view 组件的后面和前面插入内容），表示有点没有理解。于是上网仔细查了下。以下是笔记

image

基本概念

::before 用法：view::before，表示在该view组件的前面加入内容 
::after 用法：view::after，表示在该view组件的后面加入内容 
这里是双冒号，不是单冒号。单冒号是CSS2的内容，双冒号是CSS3的内容。当然微信小程序也是兼容CSS2的写法的 
这种在组件的前面和后面加入内容，其实有点类似Android中的给TextView四周加图片的做法，setCompoundDrawables(Drawable left, Drawable top, Drawable right, Drawable bottom)（原谅我这里有点强行建立联系的奇怪思路）

用法

wxml

1. <view class="container">
2. <view class="price">{{price}}</view>
3. </view>

wxss

1. .container {
2. width: auto;
3. margin: 30rpx;
4. background-color: #fff;
5. text-align: center;
6. }
7.  
8. .price {
9. position: relative;
10. display: inline-block;
11. font-size: 78rpx;
12. color: red;
13. }
14.  
15. .price::before {
16. content: "金额：¥";
17. position: absolute;
18. font-size: 40rpx;
19. top: 30rpx;
20. left: -160rpx;
21. color: black;
22. }
23.  
24. .price::after {
25. content: ".00 元";
26. font-size: 30rpx;
27. top: 40rpx;
28. position: absolute;
29. right: -90rpx;
30. color: black;
31. }

js

1. Page({
2. onLoad: function() {
3. this.setData({
4. price: 100
5. })
6. }
7. })

效果

image

其他

其实，after和before可以添加的不仅仅是像上面这种字符串，以下是可以添加的常用的内容

1. String 静态字符串
2. attr 动态内容
3. url/uri 用于引用媒体文件
4. counter 计数器，可以实现序号功能