資訊專欄INFORMATION COLUMN
摘要：現在我們經常在源碼中看到如下的寫法這里的和就是我們今天來探討的偽元素之二。舉例說明在這里我們給偽元素添加了屬性，并賦值為。這里需要注意兩者使用的順序，偽元素應該位于后面，如果順序改為是無效的。
現在我們經常在 html 源碼中看到如下的寫法：
這里的 ::after 和 ::before 就是我們今天來探討的 css 偽元素之二 - :before && :after。
偽元素首先我們要明白什么是偽元素，css 設置偽元素是為了方便給某些選擇器添加特殊的效果。偽元素的語法格式一般為：
selector:pseudo-element {property:value;}
這里的 property 是指偽元素的屬性。此外，css 類也可以與偽元素配合使用，格式如下：
selector.class:pseudo-element {property:value;}
偽元素就是這樣通過賦值給自己屬性從而給指定的選擇器添加上樣式的效果。
:before如同對偽元素的名稱一樣，:before 是用來給指定的元素的內容前面插入新的內容。舉例說明：
.before:before{content:"you before"; color:red;}
me
在這里我們給偽元素 :before 添加了屬性 content，并賦值為 you before。我們來看效果：
//在指定元素的內容 me 前添加了新內容 you before
我們不難發現這里通過偽元素 :before 添加的新內容區域默認的 display 屬性值為 inline，那么我們可不可以修改新內容區域的屬性，答案是肯定的。你可以像修改其他元素一樣修改它的樣式，我們來將它的 display 屬性值來改為 block。
.before:before{content:"you before"; display:block; color:red;}
me
現在我們再來看下效果：
//由偽元素 :before 生成新內容區域果然變為了塊元素
content 屬性對于偽元素 :before 和 :after 而言，屬性 content 是否為必選項呢？我們嘗試把 content 移除。
.before:before{display:block; color:red;}
me
//沒有了 content 屬性，新內容自然是為空的
//同時我們查看 html 源碼會發現，:before 是沒有生效的
那么我們設為空呢？
.before:before{content:""; display:block; color:red;}
me
//新內容依然為空
//此時 :before 生效
所以我們明白，對于偽元素 :before 和 :after 而言，屬性 content 是必須設置的，那么在上面的例子，我們知道屬性的值可以為字符串，那么還可以為其他形式嗎？答案是可以的，它還可以是指向一張圖片的 URL:
content: url( "img/icon.png" )配合偽類使用
偽元素 :before 還可以配合偽類使用，這里舉經常與 :before 配合使用的偽類 :hover 為例：
.before:hover:before{content:"you before"; color:red;}
me
//無內容
//鼠標移至 div 上時，新內容出現。
這里需要注意兩者使用的順序，偽元素應該位于后面，如果順序改為 .before:before:hover 是無效的。
配合取值函數 attr() 使用還有一種較為常見的用法，即配合取值函數 attr() 一起使用，如：
a::before{content: attr(title)}
此時達到的效果相當于：
專業面向開發者的中文技術問答社區:after
偽元素 :after 與 偽元素 :before 類型相同，只不過它指定的屬性 content 值為出現在指定元素內容的后面，同樣舉例說明：
.after:after{content:"after you"; color:#F00;}
I
//偽元素 :after 生成的新內容區域出現在指定元素內容的而后面
:after 其他特征與 :before 一致，可以參考上文，在此就不贅述。
參考http://www.bennadel.com/blog/2445-using-css-pseudo-elements-before-and-after.htm
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/110830.html
摘要：現在我們經常在源碼中看到如下的寫法這里的和就是我們今天來探討的偽元素之二。舉例說明在這里我們給偽元素添加了屬性，并賦值為。這里需要注意兩者使用的順序，偽元素應該位于后面，如果順序改為是無效的。 現在我們經常在 html 源碼中看到如下的寫法： showImg(http://segmentfault.com/img/bVb9y2); 這里的 ::after 和 ::before 就是...
摘要：一的用法如同對偽元素的名稱一樣，是用來給指定的元素的內容前面插入新的內容。二偽類和偽元素的區別偽類種類偽元素種類偽類作用對象是整個元素例如盡管這些條件不是基于的，但結果每一個都是作用于一個完整的元素，比如整個鏈接，段落，等等。 一：:before && :after的用法 :before 如同對偽元素的名稱一樣，:before 是用來給指定的元素的內容前面插入新的內容。舉例說明： .b...
說道JavaScript的代碼優化，就先要做的是準確的測試JavaScript的代碼執行時間。簡單來說就是采集大量的執行樣本進行數學統計和分析，這里我們使用的是benchmark.js來檢測代碼的執行情況。 首先我們需要在項目中安裝依賴，代碼如下： yarnaddbenchmark--save #或者 npmibenchmark--save 然后我們寫一個測試代碼，如下所示： ...
小編寫這篇文章的主要目的，就是給大家詳細的講解一些關于Python Behave框架知識的一些相關解答，大家要仔細的進行閱讀哦。 behave是python語言的行為驅動開發，全稱：Behavior-driven development，簡稱BDD。 BDD框架 BDD即行為驅動開發（Behavior Driven Development），其特點為： 經過通俗易懂的語言，以此用來進行...
閱讀 589·2023-04-26 01:42
閱讀 3227·2021-11-22 11:56
閱讀 2403·2021-10-08 10:04
閱讀 848·2021-09-24 10:37
閱讀 3130·2019-08-30 15:52
閱讀 1751·2019-08-29 13:44
閱讀 477·2019-08-28 17:51
閱讀 2148·2019-08-26 18:26
