實(shí)現(xiàn)效果如下：

demo01.png

實(shí)現(xiàn)這個(gè)效果，我們可能直接使用圖標(biāo)，可能內(nèi)嵌一個(gè) span標(biāo)簽，也可能會(huì)使用 ::before 和 ::after 偽元素，不過(guò)這其實(shí)利用 border就可以實(shí)現(xiàn)，上述效果的代碼如下所示：

  div {
    width: 38px;
    height: 6px;
    border-top: 18px double #F70776;
    border-bottom: 6px solid #F70776;
  }

由于 border 的顏色是繼承自 color 的，所以利用以上代碼，我們可以很輕松的實(shí)現(xiàn)一個(gè) hover 變色效果，改寫后的代碼如下：

  div {
    width: 38px;
    height: 6px;
    border-top: 18px double;
    border-bottom: 6px solid;
    color: #F70776;
    cursor: pointer;
    transition: all 1s;
  }

  div:hover {
    color: green;
  }

這個(gè)技巧是在張?chǎng)涡竦慕虒W(xué)視屏中看到的，地址如下：CSS 深入理解之 border.