::before和::after的基础学习
html中1个div
<body>
<div id="test"></div>
</body>
css中关于伪类的使用
*{ padding: 0; margin: 0; } #test{ background-image: url("../img/sea.jpg") ; background-size:500px auto; background-repeat: no-repeat; height: 313px; width: 500px; margin: 50px auto; cursor: pointer; position: relative; } #test::before{ content: ‘‘; display: none; height: 313px; width: 500px; background-color:rgba(17, 17, 17, 0.6); } #test:hover::before { display: block; } #test:hover::after { display: block; background-color: #fff; } #test::after{ content: ‘button‘; position: absolute; height: 30px; width: 80px; font-size: 14px; line-height: 30px; text-align: center; background-color: rgba(17, 17, 17, 0); color: rgb(102, 101, 101); border-radius: 10px; border: 1px solid rgb(117, 116, 116); top: 152px; left: 218px; display: none; animation:mymove 1s ; /* transition: all 1s; */ } @keyframes mymove { from {top:60px;} to {top: 152px;} }
原文：https://www.cnblogs.com/lipu12281/p/11845159.html