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

時間 2020-02-02

標籤 css 選擇器巧用欄目 CSS 简体版

原文原文鏈接

你們好，今天給你們帶來使用css中 before 、 after 實現兩個效果，話很少說，咱們先來看看， before 和 after 它們的做用是什麼css

選擇器	做用
before	向選定的元素前插入內容
after	向選定的元素後插入內容

做用描述簡單也容易理解，就是在指定的元素前面或者後面添加額外的內容，那麼具體咱們可以用到什麼地方呢？spa

使用場景一：

咱們常常在論壇中看到以下效果：code

這相似一個菜單，點擊標題就能夠快速跳轉到指定的頁面，而這些標題之間都有一個「>」符號進行間隔，而這個效果，咱們就可使用它們來實現了，下面貼上代碼片斷blog

 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中爲空也就是''，那麼咱們在頁面中看不到任何內容，可是這個元素仍是存在的），好咱們看看這段代碼的結果圖片

效果很棒吧！！it

使用場景二：

咱們先看看一張圖片：io

這是京東商城中的一張截圖，上面有不少品牌的LOGO框，當咱們將鼠標一上去後，會有一個紅色框高亮顯示，咱們會發如今沒有選中時，它們的框是淺灰色的而且比較細，而移上去後邊框變爲紅色而且變粗了，這時咱們能夠想到用hover僞類選擇器來實現，當鼠標一上去後，設定邊框顏色以及粗細，以下面代碼片斷所示：table

 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>