- 效果图:
GIF2.gif
image.png
- 14 伪元素图标字体结合使用.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>14 伪元素图标字体结合使用.html</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?8hkxug');
src: url('fonts/icomoon.eot?8hkxug#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?8hkxug') format('truetype'),
url('fonts/icomoon.woff?8hkxug') format('woff'),
url('fonts/icomoon.svg?8hkxug#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
div{
width: 200px;
height: 30px;
border: 1px solid #ccc;
margin: 100px auto;
font-family: "icomoon";
position: relative;
}
/*before或after是一个插入元素的选择器*/
div::before{
content: "\e916";
position: absolute;
right: 10px;
top: 5px;
transition: all 0.5s;
}
div:hover{
border: 1px solid red;
/*color: red;*/
}
/*鼠标经过div的时候然后再把before选出来 因为::before是一个盒子*/
div:hover::before{
color: red;
transform: rotate(180deg);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
