简单的伪元素选择器,鼠标悬停效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 200px;
height: 60px;
font-family: Arial, "微软雅黑";
/*background-color: blue;*/
margin-bottom: 10px; /*盒子地段之间距离*/
text-align: center;/*文字水平居中*/
line-height: 60px;/*小技巧:行高等于盒子高度垂直居中*/
position: relative;/*相对定位,*/
}
.box:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: blueviolet;
z-index: -1;/*让盒子在下面*/
}
.box {
color: black;/*文字颜色*/
}
.box1:before{
transform-origin: right center ;
transfor