css中::before和::after的區(qū)別

james 發(fā)布于2019-08-30 15:56 / 1281人閱讀

摘要：中和的區(qū)別表示法是在中引入的，符號是指偽元素，符號是指偽類支持的瀏覽器同時(shí)也都支持中引入的表示法。語法語法同和都是某標(biāo)簽的兄弟節(jié)點(diǎn)異是某標(biāo)簽前的兄弟元素是某標(biāo)簽后的兄弟元素我是在標(biāo)簽前的兄弟元素我是在標(biāo)簽前的兄弟元素我是標(biāo)簽效果如圖

css中::before和::after的區(qū)別

/* ::after表示法是在CSS 3中引入的，::符號是指偽元素，:符號是指偽類（:hover）.
支持CSS3的瀏覽器同時(shí)也都支持CSS2中引入的表示法:after。*/
element:after  { style properties }  /* CSS2 語法 */
element::after { style properties }  /* CSS3 語法 */

同：
::before和::after都是某標(biāo)簽的兄弟節(jié)點(diǎn)

異：
::before 是某標(biāo)簽前的兄弟元素
::after 是某標(biāo)簽后的兄弟元素

// style
p::before {
  content: "我是在p標(biāo)簽前的兄弟元素"
}
p::after {
  content: "我是在p標(biāo)簽前的兄弟元素"
}

// html
--我是p標(biāo)簽--

效果如圖：

GPU云服務(wù)器云服務(wù)器 css和html的區(qū)別 html和css的區(qū)別 html和css區(qū)別 html和css有什么區(qū)別

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/117558.html

相關(guān)文章

CSS基礎(chǔ)篇-- :before && :after的用法，偽類和偽元素的區(qū)別

摘要：一的用法如同對偽元素的名稱一樣，是用來給指定的元素的內(nèi)容前面插入新的內(nèi)容。二偽類和偽元素的區(qū)別偽類種類偽元素種類偽類作用對象是整個(gè)元素例如盡管這些條件不是基于的，但結(jié)果每一個(gè)都是作用于一個(gè)完整的元素，比如整個(gè)鏈接，段落，等等。一：:before && :after的用法 :before 如同對偽元素的名稱一樣，:before 是用來給指定的元素的內(nèi)容前面插入新的內(nèi)容。舉例說明： .b...

X_AirDu 2019-08-28 18:15 評論0 收藏0
CSS（一）偽元素的巧用

摘要：并且，一些偽元素可以使開發(fā)者獲取到不存在于源文檔中的內(nèi)容比如常見的還可以為偽元素定制樣式。。中新增加的偽元素必須用偽類使用一個(gè)冒號例如。就本文而言，我們將把我們探討的范圍限制在和這兩個(gè)偽元素的巧用上。作為一門前端er,你肯定熟知 a:hover ? ??a:visited.....我還記得在小本本上記著訣竅：love 與 hate 糾纏不休,大家都懂的吧。。。。 ? ?????偽類和...

entner 2019-08-30 15:53 評論0 收藏0
偽元素 ::after 和 ::before 應(yīng)該這么用（一）

摘要：偽元素被當(dāng)做的樣式來進(jìn)行展現(xiàn)，用法和普通的元素用法是一樣的。中的偽元素使用個(gè)冒號，在中，為了區(qū)分偽類和偽元素，規(guī)定偽元素使用個(gè)冒號。偽元素的特點(diǎn)優(yōu)點(diǎn)不占用節(jié)點(diǎn)，減少節(jié)點(diǎn)數(shù)。不僅塊級元素可以設(shè)置偽元素，大部分行級元素也可以。 1 什么是偽元素？ CSS 在渲染文檔的時(shí)候，偽元素可以通過 css 給 HTML 添加一個(gè)元素（叫標(biāo)簽也行），這個(gè)元素在文檔樹中是找不到的。偽元素被當(dāng)做 CSS ...

BlackMass 2019-08-30 15:54 評論0 收藏0
CSS開關(guān)按鈕三例

摘要：我們將使用純打造一些切換開關(guān)并使其擁有類似于的用戶體驗(yàn)。總結(jié)這是一個(gè)關(guān)于一些很好的切換開關(guān)示例這種技術(shù)使得一切完全復(fù)合語義，不會(huì)增加任何瘋狂的標(biāo)記，并且用純就可以完成。獲取開關(guān)按鈕代碼可以我們將使用純CSS打造一些切換開關(guān)并使其擁有類似于checkbox的用戶體驗(yàn)。很多時(shí)候我們都需要用戶通過勾選/取消checkbox來表明他們對一些問題的答案。我們設(shè)置了一個(gè)標(biāo)簽，一個(gè)checkbo...

ivan_qhz 2019-08-30 11:03 評論0 收藏0
CSS開關(guān)按鈕三例

摘要：我們將使用純打造一些切換開關(guān)并使其擁有類似于的用戶體驗(yàn)。總結(jié)這是一個(gè)關(guān)于一些很好的切換開關(guān)示例這種技術(shù)使得一切完全復(fù)合語義，不會(huì)增加任何瘋狂的標(biāo)記，并且用純就可以完成。獲取開關(guān)按鈕代碼可以我們將使用純CSS打造一些切換開關(guān)并使其擁有類似于checkbox的用戶體驗(yàn)。很多時(shí)候我們都需要用戶通過勾選/取消checkbox來表明他們對一些問題的答案。我們設(shè)置了一個(gè)標(biāo)簽，一個(gè)checkbo...

longmon 2019-08-02 15:13 評論0 收藏0