使用button的:after伪类选择器内容的跳动

Posted 2020-09-09 拿着菜刀

按钮的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>

 效果如下：

登录