偽元素 before after

劉東發布于2019-08-30 12:48 / 2154人閱讀

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

用途

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

基本語法

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

相關屬性：

content

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

attr():

   調用當前元素的屬性，比如將圖片的 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 動畫

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115074.html

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

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

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

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

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

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

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

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

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

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

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