CSS練習-導覽列斜線分隔-利用虛擬元素，css

CSS練習-導覽列斜線分隔-利用虛擬元素，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將第一個元素之前的偽類去掉。

效果是這樣的

似乎沒有設計圖裡的斜線傾斜角度大呢……