CSS怎么利用偽元素實(shí)現(xiàn)導(dǎo)航欄斜線分隔

這篇文章主要講解了“CSS怎么利用偽元素實(shí)現(xiàn)導(dǎo)航欄斜線分隔”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“CSS怎么利用偽元素實(shí)現(xiàn)導(dǎo)航欄斜線分隔”吧！

先看看效果：

開(kāi)始切第一張圖了，第一個(gè)遇到的問(wèn)題是頂部導(dǎo)航欄這里，用斜線分割。想到的思路是用偽類:before或者:after實(shí)現(xiàn)

先寫(xiě)html結(jié)構(gòu)。

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. <!-- 導(dǎo)航欄begin -->  

2.     <div class="header_right fr">  

3.     <a href="#" class="link">Home</a>  

4.     <a href="#" class="link">About</a>  

5.     <a href="#" class="link">Features</a>  

6.     <a href="#" class="link">Blog</a>  

7.     <a href="#" class="link">Shop</a>  

8.     <div class="alarm fr">  

9.     <img src="./images/alarm.png" alt="alarm" /></images><i class="alarm_number">2</i>  

10.     </div>  

11.     </div>  

12.  <!-- 導(dǎo)航欄end -->  

13.   

再是樣式

CSS Code復(fù)制內(nèi)容到剪貼板

1. .link:before{content: "/";margin:0 24px;color: grey;}   

2. .link:first-child:before{display:none;}   

先用：bofore，設(shè)定內(nèi)容是"/"，前后margin，顏色。再用first-child將第一個(gè)元素之前的偽類去掉。

效果是這樣的

似乎沒(méi)有設(shè)計(jì)圖里的斜線傾斜角度大呢，留給大家思考。

感謝各位的閱讀，以上就是“CSS怎么利用偽元素實(shí)現(xiàn)導(dǎo)航欄斜線分隔”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)CSS怎么利用偽元素實(shí)現(xiàn)導(dǎo)航欄斜線分隔這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！