下拉菜单箭头

2015-12-19  本文已影响107人  饥人谷_曾萍

利用绝对定位让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

上一篇下一篇

猜你喜欢

热点阅读