::before是什麼？有什麼作用？這篇文章就給大家::before有什麼用，讓大家了解::before的簡單使用，以及::before與:before的異同點。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。
一、::before是什麼？有什麼作用？
在css中，::before 是一個偽類別元素，代表產生的內容元素，表示對應元素的可抽象樣式的第一個子元素，即：所選元素的第一個子元素。 【相關影片教學建議：css教學】
利用::before可以把需插入的內容插入到元素的其他內容之前，並且預設內嵌顯示。 ::before需要使用content屬性來指定內容的值。例：
/* 在链接之前添加一颗心 */
a::before {
content: "♥";
}我們來看一個簡單的範例：
假設你有一個帶有一些文字的blockquote。你可以使用::before在實際文字之前插入內容，例如：一些花俏的引號。引號將顯示在頁面上，但不會加入DOM中的blockquote。
< blockquote >
你目前的情况并不能确定你可以去哪里; 他们只是决定你从哪里开始。- Nido Qubein
</ blockquote >以下程式碼片段將使用區塊引用添加幾個花哨的引號::before。引號將在引用文本之前的blockquote中添加，並與其內聯。
blockquote :: before {
content：“\ 201C” ; / *样式引用* /
color：deepPink;
font-size: 3em;
position: relative;
top: 20px;
}content引用是透過轉義其在屬性內定義的Unicode值。這就是通常透過CSS表示和添加字形的方式。
我們來看看運行效果：
由於使用偽元素插入的內容未插入DOM內，因此通常無法使用瀏覽器的開發者工具查看和檢查插入的內容。但是，Chrome 32 和Firebug for Firefox允許你查看偽元素在DOM中的位置，透過選擇它，你可以在CSS面板中查看與其相關聯的樣式。在Chrome的開發工具中檢查上述示範會顯示以下結果：
#可以看出，新增有::before的內容與blockquote內的其他內容內聯並位於其之前。
由於::before內容是在元素內的其他內容之前插入的，這也意味著偽元素將堆疊在來源樹中的其他元素之後。
偽元素可用於插入幾乎任何類型的內容，包括字元（如上所述），文字字串和圖像。例如，以下是::before具有有效內容的所有有效聲明：
.element :: before {
content：url（path / to / image.png）; / *图像，例如，图标* /
}
.element :: before {
content：“注意：” ; / *一个字符串* /
}
.element :: before {
content：“\ 201C” ; / *也算作一个字符串。转义Unicode会将其渲染为字符* /
}註：使用偽元素插入的圖像無法調整大小，它們會按原樣插入，因此你必須在使用前調整圖像大小。
二、::before與:before的異同點
相同點：
1、偽類別對象，用來設定物件前的內容
2、::before和:before寫法是等效的
不同點：
:befor是Css2的寫法，::before是Css3的寫法
:before的相容性要比::before好，不過在H5開發中建議使用::before比較好
說明：
1、偽類元素要配合content屬性一起使用
2、偽類元素是css渲染層加入的，不能透過js來操作
3、偽類物件特效通常透過：hover偽類樣式來啟動
.test:hover::before{
/* 这时animation和transition才生效 */
}總結：以上就是本篇文章的全部內容，希望對大家的學習有所幫助。
以上是::before有什麼作用？ ::before與:before的差別是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
