大家好，今天給大家帶來使用css中 before 、 after 實現兩個效果，話不多說，我們先來看看， before 和 after 它們的作用是什么
| 選擇器 | 作用 |
| before | 向選定的元素前插入內容 |
| after | 向選定的元素后插入內容 |
作用描述簡單也容易理解，就是在指定的元素前面或者后面添加額外的內容，那么具體我們能夠用到什么地方呢？
使用場景一：
我們經常在論壇中看到如下效果：
這類似一個菜單，點擊標題就可以快速跳轉到指定的頁面，而這些標題之間都有一個“>”符號進行間隔，而這個效果，我們就可以使用它們來實現了，下面貼上代碼片段
1 <head> 2 <meta charset="UTF-8"> 3 <title>before、after偽類選擇器演示</title> 4 <style> 5 a { 6 text-decoration: none; 7 font-size: 14px; 8 color: #4687ff; 9 } 10 /* 在a便簽后面插入>符號並設定顏色以及間隔 */ 11 a:after { 12 content: '>'; 13 color: #c3c3c3; 14 margin-left: 5px; 15 } 16 /* 將最后一個a便簽的符號去掉 */ 17 a:last-of-type:after { 18 content: ''; 19 } 20 </style> 21 </head> 22 <body> 23 <a href="#">首頁</a> 24 <a href="#">活動區論壇</a> 25 <a href="#">#回顧2019# ZOL月賽年末特別版 攝影作品有獎征集</a> 26 </body>
在偽類中我們看到有個屬性content，它是給新插入的元素設定內容的，其中為純文本，即便你寫入各種便簽，它也會以文本的形式顯示（如果content中為空也就是''，那么我們在頁面中看不到任何內容，但是這個元素還是存在的），好我們看看這段代碼的結果
效果很棒吧！！
使用場景二：
我們先看看一張圖片：
這是京東商城中的一張截圖，上面有很多品牌的LOGO框，當我們將鼠標一上去后，會有一個紅色框高亮顯示，我們會發現在沒有選中時，它們的框是淺灰色的並且比較細，而移上去后邊框變為紅色並且變粗了，這時我們可以想到用hover偽類選擇器來實現，當鼠標一上去后，設定邊框顏色以及粗細，如下面代碼片段所示：
1 <head> 2 <meta charset="UTF-8"> 3 <title>hover偽類選擇器演示</title> 4 <style> 5 span { 6 display: inline-block; 7 border: 1px solid #4687ff; 8 padding: 5px 8px; 9 } 10 span:hover { 11 border: 2px solid #ff5c70; 12 } 13 </style> 14 </head> 15 <body> 16 <div> 17 <span>盒子1</span> 18 <span>盒子2</span> 19 <span>盒子3</span> 20 <span>盒子4</span> 21 </div> 22 </body>
運行代碼后，我們發現一個問題，的確邊框顏色變紅並且變粗了，但是有一個缺陷就是，邊框會有輕微的錯位跳動的現象，如下圖所示：
現在我們就可以使用before或者after偽類來解決這一問題了，貼上代碼片段：
1 <head> 2 <meta charset="UTF-8"> 3 <title>before偽類選擇器實現鼠標移入邊框着重顯示效果</title> 4 <style> 5 /* 注意該元素需要將定位方式更改為相對布局 */ 6 span { 7 display: inline-block; 8 border: 1px solid #4687ff; 9 padding: 5px 8px; 10 position: relative; 11 } 12 /* 將插入的元素定位方式更改為絕對布局 */ 13 span:hover:before { 14 position: absolute; 15 content: ''; 16 width: 100%; 17 height: 100%; 18 border: 2px solid #ff5c70; 19 top: -2px; 20 left: -2px; 21 } 22 </style> 23 </head> 24 <body> 25 <div> 26 <span>盒子1</span> 27 <span>盒子2</span> 28 <span>盒子3</span> 29 <span>盒子4</span> 30 </div>
運行后的效果，如下圖所示：
整個實現的思路就是通過插入一個元素，覆蓋在其上的的原理，達到效果
好了，本次的分享就到這里了。