下拉菜单箭头

利用绝对定位让icon偏移,设置hidden;

<div class="button">
    <div class="text">
      abc
      <i class="icon">
        <s>
          ◇
        </s>
      </i>
    </div>
  </div>
.text{
  font-size:20px;
}
.icon{
  position: absolute;
  font: 15px/15px consolas;
  overflow: hidden;
  margin: 10px 0 0 2px;
  height: 7px;
}
.button{
  width: 40px;
  height: 30px;
  background: #ccf;
  line-height: 30px;
  padding: 0 10px;
  border-radius: 8px;
}
.icon s{
  position: relative;
  top: -6px;
  text-decoration: none;
}
.text:hover{
  color: red;
}
.button:hover s{
  position: relative;
  top: 0px;
}

demo:
http://js.jirengu.com/rav/6/edit

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容