偽元素 before after

劉東發(fā)布于2019-08-30 12:48 / 2181人閱讀

摘要：用途偽元素和用于一個(gè)給定元素的前面或者后面添加文字或者圖片。這些添加不會(huì)改變文檔的內(nèi)容，不會(huì)出現(xiàn)在結(jié)構(gòu)中，不可復(fù)制，僅僅在渲染層加入。

用途

偽元素 ::before  和 ::after 用于一個(gè)給定元素的前面或者后面添加文字或者圖片。
這些添加不會(huì)改變文檔的內(nèi)容，不會(huì)出現(xiàn)在dom結(jié)構(gòu)中，不可復(fù)制，僅僅在css渲染層加入。

基本語(yǔ)法

 element ::before {}
 兼容寫法：element：before{}  //ie8 僅支持 單冒號(hào)的寫法 
 a:before { content: "↗"; }

相關(guān)屬性：

content

    使用引號(hào)包括一段字符串，將會(huì)向元素內(nèi)容中添加字符串
   如果僅僅是配合樣式屬性做出效果，content屬性也不能為空，即：content:""

attr():

   調(diào)用當(dāng)前元素的屬性，比如將圖片的 Alt 提示文字或者鏈接的 Href 地址顯示出來
  a:after { content:"(" attr(href) ")"; }

url() / uri() – 用于引用媒體文件
h1::before { content: url(logo.png); }

兼容

1、火狐對(duì) input 的偽元素不支付
2、ie 9 、10 、11 對(duì)偽元素的line-hight 不兼容 rem單位
3、有些瀏覽器不能對(duì)偽元素使用transitions 或 animations 動(dòng)畫

利用偽元素和動(dòng)畫實(shí)現(xiàn)的創(chuàng)意鏈接特效：http://tympanus.net/Development/CreativeLinkEffects/#cl-effect-1

GPU云服務(wù)器云服務(wù)器偽元素獲取偽元素 before before_request

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

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

相關(guān)文章

詳解 CSS 屬性 - :before && :after

摘要：現(xiàn)在我們經(jīng)常在源碼中看到如下的寫法這里的和就是我們今天來探討的偽元素之二。舉例說明在這里我們給偽元素添加了屬性，并賦值為。這里需要注意兩者使用的順序，偽元素應(yīng)該位于后面，如果順序改為是無效的。現(xiàn)在我們經(jīng)常在 html 源碼中看到如下的寫法： showImg(http://segmentfault.com/img/bVb9y2); 這里的 ::after 和 ::before 就是...

plokmju88 2019-08-28 17:51 評(píng)論0 收藏0
詳解 CSS 屬性 - :before && :after

摘要：現(xiàn)在我們經(jīng)常在源碼中看到如下的寫法這里的和就是我們今天來探討的偽元素之二。舉例說明在這里我們給偽元素添加了屬性，并賦值為。這里需要注意兩者使用的順序，偽元素應(yīng)該位于后面，如果順序改為是無效的。現(xiàn)在我們經(jīng)常在 html 源碼中看到如下的寫法： showImg(http://segmentfault.com/img/bVb9y2); 這里的 ::after 和 ::before 就是...

CoderBear 2019-08-01 14:36 評(píng)論0 收藏0
css偽元素（before與after）

摘要：最近因?yàn)橐恍┚W(wǎng)頁(yè)的需要，比較深入的使用了的偽元素，發(fā)現(xiàn)原來不只是用用或而已，可以玩的東西還真是不少，所以就來篇文章，把這些比較不常玩的用法紀(jì)錄一下。最近因?yàn)橐恍┚W(wǎng)頁(yè)的需要，比較深入的使用了CSS的偽元素（Pseudo Element），發(fā)現(xiàn)原來不只是用用before或after而已，可以玩的東西還真是不少，所以就來篇文章，把這些比較不常玩的用法紀(jì)錄一下。什么是偽元素？偽元素之所以稱...

mo0n1andin 2019-08-29 18:38 評(píng)論0 收藏0
CSS基礎(chǔ)篇-- :before && :after的用法，偽類和偽元素的區(qū)別

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

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

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

entner 2019-08-30 15:53 評(píng)論0 收藏0