- 效果圖:
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;*/
}
/*鼠標經(jīng)過div的時候然后再把before選出來 因為::before是一個盒子*/
div:hover::before{
color: red;
transform: rotate(180deg);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
