正常的展示应该是这样的
肯定是什么样式兼容性出问题了
通过chrome开发者工具，看到步进器的dom结构如下
对应的css如下：
网上查了一下before、after的相关兼容性问题，果然有人遇到过，某些机型某些安卓系统下，before、after中的0.01rem不展示的问题
那么改成0.011rem试一下，果然就解决了！
踩过的坑发出来给大家参考一下，少走弯路
1.CSS部分类似这样子的命名：
复制代码代码如下:
.example:before, .example before {}
.example:after, .example after {}
一个有冒号，一个是空格分隔。前者IE8+及其他现代浏览器；后者为IE6-7准备的。
2.HTML部分
如果before/after伪类元素含有content内容（不是空字符），则content内容在HTML标签上呈现（方便IE6/7下获取），例如：
复制代码代码如下:
<div class="example" data-content=""></div>
CSS部分的content属性值应该如下：
复制代码代码如下:
.example:before, .example before { content: attr(data-content)... }
.example:after, .example after { content: attr(data-content)... }
3.JS部分
JS是为IE6/7准备的，所做的事情很简单，网元素内部插入两个元素，标签名为”before“或”after“或同时。方法代码如下：
复制代码代码如下:
var $beforeAfter = function(dom) {
if (document.querySelector || !dom &&dom.nodeType !== 1) return
var content = dom.getAttribute("data-content") || ''
var before = document.createElement("before") //可以根据需要把after或before删除一个
, after = document.createElement("after")//默认会把两个都加上
// 内部content
before.innerHTML = content
after.innerHTML = content
// 前后分别插入节点
dom.insertBefore(before, dom.firstChild)
dom.appendChild(after)
}
4.调用
$beforeAfter(document.getElementById("tip"))//tip是需要的id名
nth-child这个倒是可以换个思路实现，这个一般用在ul li标签中，奇偶行的mouseover效果，ul li:nth-child(odd){color:#fff}/*选取偶数*/ul li:nth-child(even){color:#fff}/*选取奇数*/
以上的是兼容的写法，改进后的写法如下：
ul li:first-child{color:#fff}/*选取第一个li*/
ul li:first-child+li+li{color:#fff}/*选取第三个li*/
依次还可以有第5个li，等等，好在开发中li的个数一般不会多，虽然是个比较麻烦的做法，好歹能解决问题，至于after,before之类的，也不能说没法实现，也是曲线救国的方法，有个简单的思路你可以参考下，你应该清楚的是after是主样式加载完之后才表现的，after说白了也是一个样式表，或者说是个额外的class,那么好了，后期我们通过JS可以添加这个Class了，具体这个after通过鼠标点击添加呢 还是download时候就加载这个就看你了，以上为思路，仅供参考
