CSS練習-導航欄斜線分隔-利用僞元素

開始切第一張圖了，第一個遇到的問題是頂部導航欄這裏，用斜線分割。想到的思路是用僞類:before或者:after實現

先寫html結構。

<!-- 導航欄begin -->
    <div class="header_right fr">
    <a href="#" class="link">Home</a>
    <a href="#" class="link">About</a>
    <a href="#" class="link">Features</a>
    <a href="#" class="link">Blog</a>
    <a href="#" class="link">Shop</a>
    <div class="alarm fr">
    <img src="./images/alarm.png" alt="alarm" /></images><i class="alarm_number">2</i>
    </div>
    </div>
 <!-- 導航欄end -->

再是樣式

.link:before{content: "/";margin:0 24px;color: grey;}
.link:first-child:before{display:none;}

先用：bofore，設定內容是"/"，先後margin，顏色。再用first-child將第一個元素以前的僞類去掉。

效果是這樣的

彷佛沒有設計圖裏的斜線傾斜角度大呢……