after before偽要素が同じラベルに使われている穴!!

私の菜鳥が1時間かけてやっと明らかにしたのかもしれませんが、確かに本キックアスが初めて見たので、覚えておくべきです. 
ほかのことは言わないで、コードをつけます.実装された機能は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例えば:'content'これはgoogleのデバッグツールで見ることができます!!
また、position float marginが同じラベルに適用される場合は複雑ですが、positionとmarginが適用され、floatは捨てられますが、marginが0またはautoの場合、この3つの属性がpositionに役立ちます!!
上のコードafterのmargin-top:20 pxはcontentに対する20 px外距離であることに注意してください.つまり は、相対beforeではありません
本題に戻る~~~
私の最初の質問に戻ってきたbuttonこのボタンにposition:absolute;positionを削除するとbeforeという偽要素はbuttonの一番左と一番上の境界に近づき、削除しなければbeforeは真ん中に似ています.どうやって真ん中にいるんだ?私はdivテストが好きなので、同じようにpositionを加えてどのように測定してもこのような中央の効果はありません.その後、buttonテストを使ったことを悟りました.buttontext-alig:centerが中央にある原因ですか.そしてまた興味を持ってdivに変えてtext-alignを加えて、結果はだめです!ブロックレベルの要素はtext-alignがなくて、気まずいので、spanを持って結果をテストして失敗しました!!
 
私を1时间いじって、私も心配して、寝て、明日出勤して、大神が见て言うことができることを望んで、本キックアスは菜鸟の上述のくだらない话の间违いかもしれなくて、また本当にブログを书くことができなくて、言语の组织はとても悪いです!!