14|14 伪元素图标字体结合使用 14伪元素图标字体结合使用

效果图:

文章图片
GIF2.gif

文章图片
image.png

14 伪元素图标字体结合使用.html

14 伪元素图标字体结合使用.html@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); }