偽元素 before after

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

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

用途

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

基本語法

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

相關屬性：

content

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

attr():

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

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

兼容

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

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

GPU云服務器云服務器偽元素獲取偽元素 before before_request

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

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

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

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

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

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

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

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

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

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

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

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

entner 2019-08-30 15:53 評論0 收藏0