PC端导航条上二级菜单的提示箭头

发表于 | 更新于 | 阅读次数 1
PC端导航条上二级菜单的提示箭头的实现（使用字体实现）

字体下载

1
2
3
4
@font-face{
  src: url('../font/arrow.ttf');
  font-family: 'arrow';
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
*:after {
  box-sizing: border-box;
}
.user-mail:after{
  content: "\e602";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
  font-family: 'arrow'; /*自定义字体来显示小图标*/
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;
}
.user-mail:hover:after{
  content: "\e603";
}