css after和before詳解
阿新 • • 發佈:2018-12-17
栗子
html <div class="beian"> <a href="#">22222222222222</a> </div> css .beian{display: inline-block;background: #dddddd;width: 100px;position: relative;overflow: hidden;} .beian:before {-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;content: "";display: block;} .beian:before {width: 0;height: 0;top: 50%;left: 50%;z-index: 1;position: absolute;} .beian:hover:before {box-shadow: 0 0 0 1000px #36bc99;} .beian a { display: block;position: relative;z-index: 2;color: #000;font-size: 14px;} .beian:hover a { color: #fff;z-index: 2 }