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

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

摘要：中和的區(qū)別表示法是在中引入的，符號(hào)是指?jìng)卧兀?hào)是指?jìng)晤?lèi)支持的瀏覽器同時(shí)也都支持中引入的表示法。語(yǔ)法語(yǔ)法同和都是某標(biāo)簽的兄弟節(jié)點(diǎn)異是某標(biāo)簽前的兄弟元素是某標(biāo)簽后的兄弟元素我是在標(biāo)簽前的兄弟元素我是在標(biāo)簽前的兄弟元素我是標(biāo)簽效果如圖

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

/* ::after表示法是在CSS 3中引入的，::符號(hào)是指?jìng)卧兀?符號(hào)是指?jìng)晤?lèi)（:hover）.
支持CSS3的瀏覽器同時(shí)也都支持CSS2中引入的表示法:after。*/
element:after  { style properties }  /* CSS2 語(yǔ)法 */
element::after { style properties }  /* CSS3 語(yǔ)法 */

同：
::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)簽--

效果如圖：

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117558.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

longmon 2019-08-02 15:13 評(píng)論0 收藏0