1、假设我们想在“导航网站”后面加个小三角形的箭头
那么我们可以使用 ::before选择器创建一个伪元素,然后设置这个伪元素的背景图片为这个小三角的图片,再利用相对定位设置一下位置
.box a::before {
content: '';
position: absolute;
width: 16px;
height: 14px;
background: url(./img/箭头.png);
top: 9px;
right: 5px;
}
此时我们就得到了一个小三角形的箭头
2、实现鼠标经过时,小三角形变成向上的箭头,那我们就要用到 :hover选择器,
.box:hover a::before {
background: url(./img/箭头上.png);
}
意思是:当鼠标经过这个绿色的小盒子时,咱们就把背景图换成向上的箭头
3、实现整个效果所用的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: relative;
width: 100px;
padding: 5px;
padding-right: 10px;
background-color: aquamarine;
text-align: center;
}
.box a {
text-decoration: none;
color: rgb(7, 6, 6);
}
.box a::before {
content: '';
position: absolute;
width: 16px;
height: 14px;
background: url(./img/箭头.png);
top: 9px;
right: 5px;
}
.box:hover {
background-color: rgb(248, 236, 71);
}
.box:hover a::before {
background: url(./img/箭头上.png);
}
</style>
</head>
<body>
<div class="box">
<a href="">导航网站</a>
</div>
</body>
</html>