使用button的:after偽類選擇器內容的跳動

按鈕的css樣式，想要作個美觀一點的按鈕，使用:after偽類選擇器在按鈕后跟隨"!!"的符號，但點擊按鈕時按鈕的值內容動，但跟隨的"!!"符合不動，這樣看起來很難受，就嘗試讓"!!"也動起來，經過測試發現，只要將按鈕的css樣式設定為相對定位即可。這可能也是基礎沒有理解透徹導致的。

/*使用相對定位控制跟隨內容是否會隨這按鈕一起跳動*/
     position: relative;

 

.button{
            height: 30px;
            width: 65px;
          border:1px solid #64c878;
          background: -webkit-linear-gradient(top,#90dfa2,#84d494);
          background: -moz-linear-gradient(top,#90dfa2,#84d494);
          background: linear-gradient(#90dfa2,#84d494);
          text-align: left;
     /*使用相對定位控制跟隨內容是否會隨這按鈕一起跳動*/
     position: relative;
     /*
               對按鈕圓邊角的設置
               border-radius: 0px 100px 100px 0px;*/
 }

.button:after{
    position: absolute;
    content:'!!';
    color: #b82929;
    margin-left: 10px;
    box-shadow: inset;
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    transform:rotate(-90deg);

}
    .button:active{
        top: 1px;
        box-shadow: 0 1px 3px #4d7254 inset,0 3px 0 #fff;
        background-color: #000c0c;
        background: -webkit-linear-gradient(top, #df4e58,#84d494);
        background: -moz-linear-gradient(top,#df4e58,#84d494);
        background: linear-gradient(#df4e58,#84d494);
    }

按鈕
<button type="submit" class="button" >登錄</button>

 效果如下：

登錄