after before伪元素用在同一标签上的坑!!

标签：

可能是我菜鸟花了一个小时才弄清，但的确是本屌第一次见，应该记下来； 

先不说别的 ， 上代码；   实现的功能是点击button时 ‘select all‘会上移出button  ‘unselect‘也会从下面出来出现在button内, 代码没贴全抱歉了

<button>&nbsp;</button> //这个空白有什么用？ 占位  ？ 求详解啊

*{padding:0;margin:0;}
button.select::before, button.select::after {
    content: "select all";
    display: block;
    position: absolute; //我的疑问！！
    text-align: center;
    transition: all 0.1s linear 0s;
    width: 150px;
}        
button.select::after {
    content: "unselect";
    margin-top: 20px;
    opacity: 0;
}
button.select {
    background: none repeat scroll 0 0 #435a6b;
    cursor: pointer;
    width: 150px;
}
button {
    border: 0 none;
    border-radius: 2px;
    color: red;
    font-size: 15px;
    font-weight: 700;
    height: 45px;
    letter-spacing: 2px;
    margin: 0 7px;
    outline: 0 none;
    padding: 5px 0;
    text-transform: uppercase;
}

主要代码就是这些 ；  

然后我的问题来了 ，  主要在于 position:absolute这个起了什么作用呢？

先帮助初学者挑几个坑啊  关于before和after伪元素都在同一标签上他们的顺序是 ::before content ::after  比如：‘<button>content</button>‘ 这个可以用google的调试工具看的到！！

还有关于position float margin 都应用在同一标签时是比较复杂的，position和margin会应用的，float就被舍弃了，不过当margin为0或者auto时，这三个属性就position起作用！！

注意了 上面的代码after的margin-top：20px  是相对content的20px外边距； 也就是&nbsp，不是相对before的

回到正题~~~

好了 啰嗦了这么久回到我最初的问题button这个按钮上position:absolute;  当我把position去掉之后 before这个伪元素就会贴近button最左边和最上边的边界，如果没有去掉的话before就类似居中了。   我在想这妈的是怎么居中的呢 ?   由于我喜欢拿div测试，同样加了position怎么测怎么都没有这个类似居中的效果，后来焕然大悟用了button测试有了，难道是buttontext-alig:center居中的原因吗 ？   然后又兴致勃勃换成div加上text-align，结果不行！ 块级元素没有text-align，尴尬了，  于是拿了span来测试结果失败！！

弄了我一个小时，我也愁了，睡觉，明天上班 ， 希望有大神看到了能够说说 ，   本屌是菜鸟上述可能是废话错误,还有真不会写博客，语言组织好差！！  

after before伪元素用在同一标签上的坑!!

标签：

原文地址：http://www.cnblogs.com/chejiang/p/4483477.html