SOURCE

<a class="show-more">
  更多
  <i class="arrows">
  </i>
</a>

.show-more {
  position: relative;
  padding-right: 10px;
  cursor: pointer;
  .arrows {
    width: 0;
    height: 0;
    border-left: 4px dashed transparent;
    border-top: 4px solid #666;
    border-right: 4px dashed transparent;
    display: inline-block;
    position: absolute;
    right: 0;
    top: 10px;
    _top: 4px;
    transition: all .25s;
    vertical-align: top;
    font-size: 0;
    line-height: 0;
  }
  &:hover {
    color: red;
    .arrows {
      border-top-color: red;
      transform: rotate(180deg);
    }
  }
}