大家好，今天給大家帶來使用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>

運行后的效果，如下圖所示：

整個實作的思路就是通過插入一個元素，覆寫在其上的的原理，達到效果
好了，本次的分享就到這里了，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/79788.html

標籤：Html/Css

上一篇：HTML5檔案型別如何定義，有哪些標簽，以及如何使用，從整體認識HTML5

下一篇：DOM 事件與事件委托

CSS中before、after偽類選擇器的巧用

使用場景一：

使用場景二：