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);
}
推荐阅读
- 投稿|一年后,长短视频之争终成“伪命题”
- 一文剖析HTML块和内联元素以及DIV容器,运维开发必备前端技能,基本功强化训练。
- display|display inline inline-block元素之间的边框
- Windows 10 系统进入测试模式命令
- css|css子元素选择父元素的实现
- Webpack干货系列|Webpack干货系列 | Webpack5 怎么处理字体图标、图片资源
- 如何设置网页 favicon 图标
- 力扣之存在重复元素
- jQuery的功能
- CSS 中 ::before 和 ::after 伪元素的几个实际用途