微信小程序 CSS 选择器::after和::before的简单使用

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

wxml

wxss

js

效果大猛

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

具体的请参考这篇文章

在小程序开发过程中，经常遇到一种情况：页面中的一个按钮需要带有 open-type ，同时还要灵活地设置这个按钮的尺寸和背景样式。

这就意味着，你不能使用 <view bind:tap="onBtn"></腔隐view 再加上css设置一张背景图来实现。

然后系统的 <button>也不是什么省油的灯。相信大家都干过这样的事情：

哎呀，不小心透漏剧握物情。

所以要满足刚刚的需求，应该如此

当然，看了这么久，只知道这个，肯定不划算。你一定很想知道这里面的 ::after 是干啥的。

详见:

CSS :after 选择伍皮厅器

你所不知的 CSS ::before 和 ::after 伪元素用法

---